Cuando formatees im\u00e1genes en CSS, querr\u00e1s a\u00f1adir espacios entre ellas para organizarlas mejor. Al fin y al cabo, quieres que tu p\u00e1gina web tenga un aspecto visual agradable y limpio. Entonces, \u00bfc\u00f3mo se a\u00f1aden espacios entre im\u00e1genes en CSS? Si eres totalmente nuevo en CSS y no sabes c\u00f3mo a\u00f1adir espacios entre contenidos como im\u00e1genes, entonces est\u00e1s en el lugar adecuado. <\/p>\n\n
Antes de continuar con esta gu\u00eda, \u00a1me gustar\u00eda dar las gracias a Alpha Containers<\/a> y a Propstep<\/a> por hacer posible este art\u00edculo!<\/p>\n\n Esta gu\u00eda para principiantes te mostrar\u00e1 f\u00e1cilmente c\u00f3mo a\u00f1adir espacio entre im\u00e1genes en CSS. Adem\u00e1s, tambi\u00e9n hay muchas formas de c\u00f3mo a\u00f1adir espacio entre im\u00e1genes en CSS. Pero esta gu\u00eda utilizar\u00e1 los m\u00e9todos para principiantes que utilizar\u00edas para a\u00f1adir espacio entre im\u00e1genes y otros tipos de contenido. <\/p>\n\n Antes de pasar a los distintos m\u00e9todos que puedes utilizar, tendr\u00edas que familiarizarte primero con el Modelo de Caja CSS. El Modelo de Caja CSS consta de cuatro partes (el contenido o tu imagen, el relleno, el borde y el margen), que te permiten a\u00f1adir espacios en medio de tus elementos. Y para a\u00f1adir espacio entre im\u00e1genes en CSS, puedes elegir entre la propiedad margin o la propiedad padding. <\/p>\n\n La parte m\u00e1s externa del Modelo de Caja CSS es la propiedad de margen, que crea un \u00e1rea transparente en el exterior del borde. En primer lugar, necesitas saber a qu\u00e9 partes quieres a\u00f1adir m\u00e1rgenes para mejorar el espaciado. <\/p>\n\n Puedes utilizar las propiedades de margen superior, derecho, inferior e izquierdo. Aunque son bastante autoexplicativas, a continuaci\u00f3n te explicamos lo que necesitas saber sobre estas propiedades de margen: <\/p>\n\n margin-top: a\u00f1ade un margen en la parte superior de tu imagen<\/p>\n\n margin-right: a\u00f1ade un margen a la derecha de tu imagen<\/p>\n\n margin-bottom: a\u00f1ade un margen a la parte inferior de tu imagen<\/p>\n\n margin-left: a\u00f1ade un margen a la izquierda de tu imagen<\/p>\n\n Tras determinar a qu\u00e9 partes quieres aplicar m\u00e1rgenes, ahora tendr\u00e1s que decidir qu\u00e9 valores quieres a\u00f1adir. Puedes definir tu valor utilizando un porcentaje especificado (utilizando %) o una longitud. Las longitudes son unidades compuestas por p\u00edxeles (px), puntos (pt) o cent\u00edmetros (cm). <\/p>\n\n Tambi\u00e9n puedes a\u00f1adir valores positivos o negativos para aumentar o disminuir el espacio entre tus im\u00e1genes. Aqu\u00ed tienes un ejemplo de c\u00f3digo: <\/p>\n\n .imagen-muestra {<\/p>\n\n margin-top: 10px;<\/p>\n\n margen derecho: 20px;<\/p>\n\n margin-bottom: 30px;<\/p>\n\n margen izquierdo: 40px;<\/p>\n\n }<\/p>\n\n Puedes elegir a\u00f1adir valores para todos los m\u00e1rgenes a tu gusto. Por otra parte, tambi\u00e9n puedes a\u00f1adir s\u00f3lo valores concretos a m\u00e1rgenes espec\u00edficos. Por ejemplo, si s\u00f3lo quieres a\u00f1adir un margen en la parte inferior de tus fotos, puedes simplemente declarar el c\u00f3digo de esta forma: <\/p>\n\n .imagen-muestra {<\/p>\n\n margin-bottom: 30px;<\/p>\n\n }<\/p>\n\n Utilizar la propiedad abreviada margen es sin duda la forma m\u00e1s r\u00e1pida de a\u00f1adir espacio entre im\u00e1genes en CSS. As\u00ed que, alternativamente, puedes utilizar la propiedad abreviada, margin, y escribir tu c\u00f3digo CSS as\u00ed: <\/p>\n\n Ejemplo:<\/p>\n\n .imagen-muestra {<\/p>\n\n margen: 20px;<\/p>\n\n }<\/p>\n\n Puedes a\u00f1adir un m\u00ednimo de un valor y un m\u00e1ximo de cuatro valores para definir tus m\u00e1rgenes utilizando el m\u00e9todo abreviado. Ten en cuenta, sin embargo, que a\u00f1adir diferentes cantidades de valores utilizando el m\u00e9todo abreviado afecta a tus m\u00e1rgenes de forma diferente. <\/p>\n\n El c\u00f3digo de ejemplo siguiente utiliza cuatro valores para su propiedad abreviada para definir individualmente todas las propiedades de los m\u00e1rgenes. Escribiendo tu c\u00f3digo de esta forma a\u00f1ades los siguientes m\u00e1rgenes correspondientes a tu imagen: <\/p>\n\n .imagen-muestra {<\/p>\n\n margen: 15px 10px 5px 20px;<\/p>\n\n }<\/p>\n\n Margen superior: 15px<\/p>\n\n Margen derecho: 10px<\/p>\n\n Margen inferior: 5px<\/p>\n\n Margen izquierdo: 20px<\/p>\n\n Por otra parte, tambi\u00e9n puedes simplemente a\u00f1adir tres valores utilizando la propiedad abreviada de margen. Utilizando el siguiente c\u00f3digo, a\u00f1ade los siguientes m\u00e1rgenes a tu imagen: <\/p>\n\n Ejemplo:<\/p>\n\n .imagen-muestra {<\/p>\n\n margen: 15px 10px 20px;<\/p>\n\n }<\/p>\n\n Margen superior: 15px<\/p>\n\n M\u00e1rgenes derecho e izquierdo: 10px<\/p>\n\n Margen inferior: 20 px<\/p>\n\n Tambi\u00e9n puedes a\u00f1adir simplemente dos valores. Utilizando el c\u00f3digo de ejemplo siguiente, a\u00f1ade los siguientes m\u00e1rgenes a tu imagen: <\/p>\n\n Ejemplo:<\/p>\n\n .imagen-muestra {<\/p>\n\n margen: 15px 20px;<\/p>\n\n }<\/p>\n\n M\u00e1rgenes superior e inferior: 15px<\/p>\n\n M\u00e1rgenes derecho e izquierdo: 20px<\/p>\n\n Por \u00faltimo, puedes a\u00f1adir un valor cuando utilices la propiedad abreviada margen. Escribiendo tu c\u00f3digo de esta forma, ajustas tus m\u00e1rgenes al tama\u00f1o indicado. <\/p>\n\n .imagen-muestra {<\/p>\n\n margen: 15px;<\/p>\n\n }<\/p>\n\n Todos los m\u00e1rgenes: 10px<\/p>\n\n El relleno es otro elemento del Modelo de Caja CSS. El relleno sirve como espacio que rodea el contenido y se encuentra en medio del contenido y el borde. Al igual que el margen, el relleno tambi\u00e9n es transparente. El relleno se suele a\u00f1adir para garantizar que tu contenido (en este caso, im\u00e1genes) no toque los bordes de su elemento de caja correspondiente. <\/p>\n\n De nuevo, tambi\u00e9n tendr\u00e1s que determinar a qu\u00e9 elementos necesitas a\u00f1adir rellenos. Puedes utilizar las propiedades de relleno padding-top, padding-right, padding-bottom y padding-left para a\u00f1adir rellenos a tu imagen. Dicho esto, la propiedad padding funciona de forma similar a la propiedad margin. Esto es lo que debes saber sobre ellas: <\/p>\n\n padding-top: a\u00f1ade relleno a la parte superior de tu imagen<\/p>\n\n padding-right: a\u00f1ade relleno a la derecha de tu imagen<\/p>\n\n padding-bottom: a\u00f1ade relleno a la parte inferior de tu imagen<\/p>\n\n padding-left: a\u00f1ade relleno a la izquierda de tu imagen<\/p>\n\n Tambi\u00e9n puedes elegir entre a\u00f1adir un determinado porcentaje o longitud para tu relleno. Sin embargo, a diferencia de la propiedad margin, no se te permite utilizar valores negativos en absoluto. Aqu\u00ed tienes un c\u00f3digo de ejemplo que puedes consultar: <\/p>\n\n .imagen-muestra {<\/p>\n\n padding-top: 20px;<\/p>\n\n padding-derecho: 50px;<\/p>\n\n padding-bottom: 30px;<\/p>\n\n padding-izquierdo: 40px;<\/p>\n\n }<\/p>\n\n De nuevo, puedes optar simplemente por no definir todos los paddings al a\u00f1adirlos a tus im\u00e1genes. Por ejemplo, si s\u00f3lo quieres que los paddings a\u00f1adan espacio en el centro de tu contenedor e imagen en la parte superior, puedes hacer el siguiente c\u00f3digo: <\/p>\n\n .imagen-muestra {<\/p>\n\n padding-top: 30px;<\/p>\n\n }<\/p>\n\n Si te preguntas si hay otra forma f\u00e1cil de a\u00f1adir espacio entre im\u00e1genes en CSS, la respuesta es s\u00ed. De forma similar a la propiedad margin, tambi\u00e9n puedes utilizar otra forma de a\u00f1adir r\u00e1pidamente rellenos entre tus im\u00e1genes o contenidos. Esto se hace utilizando la propiedad abreviada padding. He aqu\u00ed un ejemplo: <\/p>\n\n .imagen-muestra {<\/p>\n\n Relleno: 20px 5px 10px 15px;<\/p>\n\n }<\/p>\n\n Al igual que con el margen, puedes a\u00f1adir como m\u00ednimo un valor y como m\u00e1ximo cuatro valores al definir tus rellenos utilizando la forma abreviada. De nuevo, las distintas cantidades de valores afectan a tus rellenos de forma diferente con la propiedad abreviada. <\/p>\n\n De forma similar a la propiedad de margen, tambi\u00e9n puedes a\u00f1adir cuatro valores para definir todas las propiedades de relleno individualmente. Dicho esto, el ejemplo del c\u00f3digo escrito a continuaci\u00f3n da como resultado los siguientes rellenos: <\/p>\n\n .imagen-muestra {<\/p>\n\n Relleno: 15px 10px 5px 20px;<\/p>\n\n }<\/p>\n\n Relleno superior: 15px<\/p>\n\n Relleno derecho: 10px<\/p>\n\n Relleno inferior: 5px<\/p>\n\n Relleno izquierdo: 20px<\/p>\n\n Tambi\u00e9n puedes simplemente tres valores utilizando la propiedad abreviada. Utilizando el c\u00f3digo siguiente, obtendr\u00e1s los siguientes rellenos para tus im\u00e1genes: <\/p>\n\n .imagen-muestra {<\/p>\n\n Relleno: 15px 10px 20px;<\/p>\n\n }<\/p>\n\n Relleno superior: 15px<\/p>\n\n Relleno derecho e izquierdo: 10px<\/p>\n\n Relleno inferior: 20px<\/p>\n\n Si a\u00f1ades dos valores utilizando la propiedad abreviada como en el c\u00f3digo de ejemplo que aparece a continuaci\u00f3n, obtendr\u00e1s los siguientes rellenos:<\/p>\n\n .imagen-muestra {<\/p>\n\n Relleno: 15px 20px;<\/p>\n\n }<\/p>\n\n Relleno superior e inferior: 15px<\/p>\n\n Relleno derecho e izquierdo: 20px<\/p>\n\n Por \u00faltimo, puedes a\u00f1adir simplemente un valor a la propiedad abreviada padding si quieres valores uniformes para todos tus paddings. Con el c\u00f3digo de ejemplo siguiente, obtendr\u00e1s los siguientes rellenos: <\/p>\n\n .imagen-muestra {<\/p>\n\n Relleno: 15px;<\/p>\n\n }<\/p>\n\n Todos los paddings: 15px<\/p>\n\n Estas son las principales formas de a\u00f1adir espacio entre im\u00e1genes en CSS. Mientras sepas qu\u00e9 m\u00e9todos utilizar y manipular tu contenido, deber\u00edas ser capaz de a\u00f1adir espacios a tus im\u00e1genes de forma eficaz. \u00a1Mis mejores deseos en tu viaje de aprendizaje de CSS y en tu proyecto! <\/p>\n\nFamiliarizarse con el modelo de caja CSS<\/h2>\n\n
A\u00f1adir espacio entre im\u00e1genes en CSS utilizando la propiedad Margen<\/h2>\n\n
A\u00f1adir m\u00e1rgenes utilizando la propiedad abreviada margen<\/h2>\n\n
1. A\u00f1adir cuatro valores a la propiedad abreviada de margen<\/h3>\n\n
2. A\u00f1adir tres valores a la propiedad abreviada de margen<\/h3>\n\n
3. A\u00f1adir dos valores a la propiedad abreviada de margen<\/h3>\n\n
4. A\u00f1adir un valor a la propiedad abreviada de margen<\/h3>\n\n
A\u00f1adir espacio entre im\u00e1genes en CSS utilizando la propiedad Padding<\/h2>\n\n
A\u00f1adir rellenos utilizando la propiedad abreviada relleno<\/h2>\n\n
1. A\u00f1adir cuatro valores a la propiedad abreviada de relleno<\/h3>\n\n
2. A\u00f1adir tres valores a la propiedad abreviada de relleno<\/h3>\n\n
3. A\u00f1adir dos valores a la propiedad abreviada de relleno<\/h3>\n\n
4. A\u00f1adir un valor a la propiedad abreviada de relleno<\/h3>\n\n
Conclusi\u00f3n<\/h2>\n\n