Las distancias de margen y relleno se especifican en . Márgenes CSS y relleno: diferencia entre las propiedades de margen y relleno. La sangría se establece en el último elemento posible de la casa.

Déjame decirte ahora mismo, esta es una lección muy importante. Después de estudiarlo, podrá colocar elementos en la página, establecer sangrías entre ellos, crearlos dentro de un bloque específico separado y establecer márgenes.

relleno

El relleno es una propiedad que establece la cantidad de relleno que tiene un elemento desde el borde interior del borde hasta el contenido. El contenido puede ser texto sin formato, una imagen o un elemento secundario que también puede tener sus propios márgenes.

Las unidades pueden ser píxeles (px) o porcentajes (%).

#cuadra(
relleno: 12px /* relleno desde los bordes del bloque hasta el contenido: habrá 12 píxeles en todos los lados */
}

Es posible especificar un campo solo en un lado específico:

acolchado superior- una propiedad que crea márgenes en la parte superior.
relleno derecho- una propiedad que crea campos a la derecha.
fondo acolchado- propiedad que crea márgenes inferiores.
relleno-izquierda- una propiedad que crea márgenes a la izquierda.

#cuadra(
parte inferior del relleno: 25px /* margen inferior 25px */
relleno-izquierda: 15px; /* margen izquierdo 15px */
}

Como notó, si especifica campos de 2 o 3 lados de esta manera, obtendrá un código largo. Hay una notación abreviada para la propiedad de relleno para esto. Los 4 valores se indican a su vez en él: desde cada borde en una línea, el movimiento va en el sentido de las agujas del reloj, comenzando desde la parte superior:

Acolchado: Acolchado superior Acolchado derecho Acolchado inferior Izquierdo;

#cuadra(
relleno: 25px 10px 15px 6px; /* arriba 25px, derecha 10px, abajo 15px, izquierda 6px */
}

margen

La propiedad de margen, a diferencia del relleno, establece la cantidad de relleno entre los bordes de los elementos.
Si el elemento es un elemento secundario, el relleno es el espacio desde el borde del elemento hasta el borde interior del borde principal.
Si el elemento no tiene padre, se considera que la sangría es el espacio libre establecido por la propiedad en los bordes del borde de los elementos circundantes.

#cuadra(
margen: 4px
}

Para especificar sangrías solo en ciertos lados, existen las siguientes propiedades:

margen superior- una propiedad que crea sangrías desde arriba.
margen derecho- una propiedad que crea sangrías a la derecha.
margen inferior- propiedad que crea sangrías desde abajo.
margen izquierdo- una propiedad que crea sangrías a la izquierda.

Al igual que la propiedad de relleno, el margen también tiene la capacidad de abreviar valores para diferentes lados. El movimiento va en el sentido de las agujas del reloj, desde el margen superior:

Margen: Margen superior Margen derecho Margen Inferior Margen izquierdo;

#cuadra(
margen: 15px 10px 5px 25px; /* arriba 15px, derecha 10px, abajo 5px, izquierda 25px */
}

¡Gracias por su atención!

Fuente: margen o relleno?
Felipe Sporrer.
Traducción: vl49.

¿Cuándo es mejor usar márgenes para fines de formato y cuándo usar relleno? ¿Importa?

Luché durante mucho tiempo en busca de respuestas adecuadas. Y solo después de escribir una gran cantidad de código CSS terrible e ilegible, acompañado de varios efectos secundarios, pude decir con confianza que había encontrado las reglas fundamentales con respecto a los problemas enumerados anteriormente.

Para mayor claridad, pasemos a una situación típica que probablemente sea familiar para todos los desarrolladores de interfaces de usuario en 2017. Tenemos la plantilla de tarjeta más simple.

En este ejemplo, se pueden distinguir dos tipos de intervalos:

Es muy importante entender aquí que estamos tratando con dos conceptos diferentes, que no deben estar interconectados al momento de vincular. Es decir, si necesito cambiar la distancia entre las tarjetas y su contenedor, por ejemplo, hasta 24 píxeles, esto no debería afectar de ninguna manera el espacio entre las tarjetas.

¿Implementando un ejemplo con CSS?

Hay literalmente miles de formas de crear una plantilla de este tipo utilizando márgenes y relleno, pero me gustaría presentarles una de ellas, que demuestra el uso correcto de las propiedades de margen y relleno. Además, este método le permite agregar otras tarjetas más adelante.

Envase(
relleno: 16px
}
.tarjeta + .tarjeta(
margen: 0 0 0 8px;
}

Solo 2 selectores y 2 reglas.

¿Cuál es la función del signo más?

Símbolo + representa selector adyacente. Solo apunta al elemento que sigue inmediatamente al elemento especificado antes de este selector.

Como puede ver en la imagen de arriba, en nuestro caso, este selector seleccionará cada carta precedida por cualquier otra carta. Entonces, con el selector adyacente, podemos establecer el margen izquierdo para cada tarjeta excepto la primera.

Esto significa que tenemos la posibilidad de añadir la cantidad de tarjetas que necesitemos, la distancia entre las cuales siempre será de ocho píxeles.

Todo funciona bien hasta que necesitamos colocar algo más que una tarjeta al lado de las tarjetas. Bueno, digamos un botón "Agregar tarjeta" ("Agregar tarjeta"):

Según el fragmento de CSS que ya tenemos, probablemente no le daríamos al nuevo elemento que representa el botón una clase .card, ya que no es una tarjeta. ¿Cómo ser? ¿Vale la pena crear un nombre de clase adicional .add-card , que contiene la misma regla con una propiedad de margen que la clase .card? No, hay una solución mejor.

Búho lobotomizado *+* .

¿Y qué aspecto tiene? A pesar de la asociación divertida, este método funciona muy bien y lo he estado usando todo el tiempo desde que lo descubrí. Entonces, ¿para qué es todo esto? Aquí hay un vistazo al código CSS relevante:

Envase(
relleno: 16px
}
/* Bueno, ¿reconociste el búho lobotomizado? */
.contenedor > * + * (
margen: 0 0 0 8px;
}

Como probablemente recuerdes, el selector anterior se aplicaba a cualquier carta que estuviera precedida por otra carta. Ahora con su ayuda podemos formatear cada elemento inmediatamente precedido por cualquier otro elemento, incluido el botón, por supuesto.

Eventualmente.

Espero sinceramente que el material presentado aquí lo haya ayudado a determinar cuándo usar relleno para separar el contenido dentro del contenedor y cuándo usar márgenes.

Como conclusión, me gustaría presentar para su consideración un proyecto de bolígrafo que demuestra los ejemplos anteriores, así como dos reglas que han sido probadas por mi propia experiencia. Entonces, usamos:

relleno- para espacios entre el contenedor y su contenido.

margen- para espacios entre elementos dentro del contenedor.

Vistas de publicaciones: 427

Descripción

Establece el valor de los márgenes alrededor del contenido del elemento. Un margen es la distancia desde el borde interior del marco de un elemento hasta un rectángulo imaginario que limita su contenido (Figura 1).

La propiedad de relleno le permite establecer el valor de relleno para todos los lados del elemento a la vez, o definirlo solo para los lados especificados.

Sintaxis

relleno: [valor | porcentaje] (1, 4) | heredar

Valores

Se permite utilizar uno, dos, tres o cuatro valores, separándolos con un espacio. El efecto depende del número de valores y se da en la Tabla. uno.

Los márgenes se pueden especificar en píxeles (px), porcentajes (%) u otras unidades compatibles con CSS. El valor de herencia indica que se hereda del padre. Al especificar un margen como porcentaje, el valor se calcula a partir del ancho del padre del elemento.

HTML5 CSS2.1 IE Cr Op Sa Fx

El resultado de este ejemplo se muestra en la Fig. 2.

Arroz. 2. Aplicar la propiedad de relleno

modelo de objetos

documento.getElementById("elementID").style.padding

navegadores

Internet Explorer hasta la versión 7.0 no admite el valor heredado.

Shastaya en los foros se encontró con el hecho de que todavía surge la pregunta, ¿qué significa relleno, y qué margen y cuales son las diferencias entre ellos. Es por eso que decidí recordarlo. Entonces, sin recurrir a frases abstrusas, establezcamos la tarea y analicemos un ejemplo en el que todo se aclarará.

Tarea: En la pagina necesito un bloque rojo(200x200 píxeles), que se aleja de los bordes del navegador arriba y a la izquierda por 40 y 70 píxeles respectivamente, y el texto dentro del cual sangra desde la izquierda y la parte superior por 40 píxeles.

Decisión: mira la imagen y el código. Nuestro bloque rojo no debe exceder los 200 por 200 píxeles y debe estar acolchado desde los bordes del navegador (u otros bloques de contenido). En realidad, hacemos estas sangrías a través del margen. Si hacemos relleno, entonces el relleno ocurre dentro de nuestro bloque rojo y el relleno se obtiene con el fondo del propio bloque (es decir, rojo).

Además de las propiedades utilizadas (líneas 6-9), también hay propiedades margin-right, padding-right, margin-bottom, padding-bottom - son para sangría derecha e inferior, respectivamente. Los valores de todas estas propiedades pueden estar en píxeles (px), porcentajes (%), o en unidades em.

Básicamente, eso es todo. Sin embargo, hay algunas otras características de trabajar con ellos.

Características de margen y relleno.

Al usar el relleno, las dimensiones del relleno deben restarse de la altura y el ancho del bloque; de ​​lo contrario, el tamaño del bloque aumentará según el tamaño del relleno.

Si establece margin-left y margin-right con valores automáticos para algún bloque, entonces si el bloque tiene un ancho fijo (por ejemplo, 400 px) y no hay una propiedad CSS flotante, entonces este bloque se alineará con el centro de el elemento en el que se encuentra. En realidad, para el diseño sin caucho con alineación central, generalmente se usa este método de alineación. Aunque IE 5.5 y versiones anteriores no son compatibles con el valor automático, eso no impide que lo uses todo el tiempo =).

No se recomienda usar relleno y margen en tablas porque el efecto será impredecible en diferentes navegadores.

Y lo último que quería decir. No olvide usar construcciones de publicaciones abreviadas como margin: 10px 0 5px 20px;. Si la sangría es cero, simplemente puede poner un cero, sin especificar parámetros. Recordar cuál de los parámetros pertenece a qué borde es muy simple: para el bloque, las sangrías van en el sentido de las agujas del reloj: el primer número está arriba, el segundo está a la derecha, el tercero está abajo, el cuarto está a la izquierda.

Eso es en realidad todo lo que quería decirte hoy. ¡Feliz fin de semana a todos!

La propiedad padding CSS es responsable de configurar el relleno dentro del elemento desde su borde.

Relleno de sintaxis CSS

relleno: arriba a la derecha abajo a la izquierda;

• top - sangría desde el borde superior del elemento;
• right - sangría desde el borde derecho del elemento;
• inferior: sangría desde el borde inferior del elemento;
• izquierda: sangría desde el borde izquierdo del elemento;

Los valores se especifican con mayor frecuencia en píxeles. También se permiten porcentajes y otras unidades CSS aceptables.

Nota 1
Se permiten más de cuatro valores. Dependiendo del número de valores, las acciones serán diferentes:

• Si se dan 3 valores, entonces el primer valor establece la sangría desde arriba, el segundo, tanto a la izquierda como a la derecha, y el tercero, desde abajo.
• Si se dan 2 valores, entonces el primer valor establece la sangría desde la parte superior e inferior, el segundo, a la izquierda y a la derecha del contenido
• Si se establece 1 valor, la sangría se establece en la misma sangría para todos los lados. Por ejemplo:

relleno: 10px 10px 10px 10px; Puedes configurarlo de forma más compacta: relleno: 10px

Nota 2
A diferencia de la propiedad de margen CSS, no se permiten valores de relleno negativos.

Además, el relleno tiene 4 propiedades CSS separadas. Cada uno de ellos es responsable de alguna dirección.

• padding-left - relleno desde el borde izquierdo del elemento;
• padding-right - relleno desde el borde derecho del elemento;
• padding-top - relleno desde el borde superior del elemento;
• padding-bottom - relleno desde el borde izquierdo del elemento;

por ejemplo

relleno: 3px 5px 7px 10px; O puede especificar en detalle: relleno-izquierda: 10px; relleno-derecha: 5px; acolchado superior: 3px; relleno inferior: 7px;

Ejemplos con diferentes sangrías dentro de un elemento

Ejemplo 1: Texto de sangría dentro de una etiqueta

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта