¿Cuáles son las diferencias y usos del margen y el relleno en CSS? Acabo de aprender CSS y estas dos cosas me preocuparon durante mucho tiempo.
1. Atributo de margen El atributo de margen en CSS establece los atributos de margen en las cuatro direcciones (arriba, abajo, izquierda y derecha) para un elemento determinado. Margen es la abreviatura de las cuatro configuraciones de propiedades de margen. Las cuatro configuraciones de propiedad de margen son: margen superior, margen derecho, margen inferior y margen izquierdo. La propiedad de margen acepta cualquier unidad de longitud, que puede ser píxeles, pulgadas, milímetros o px.
Varias formas de configurar el atributo Margen:
1 Establecer los cuatro márgenes exteriores de un elemento determinado al mismo tiempo
//Establecer el elemento h1. para tener 20 px hacia arriba, márgenes de 30 px a la derecha, 30 px hacia abajo y 20 px a la derecha.
h1 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; ¿No parece muy complicado? Anteriormente presentamos que el atributo de margen es la abreviatura de las cuatro configuraciones de atributos de margen. Entonces podemos abreviar el código anterior para configurar el margen exterior del elemento h1 como:
h1{
margin: 20px 30px 30px 20px; orden en el que se establecen los valores La relación correspondiente del dispositivo que gira en el sentido de las agujas del reloj alrededor del elemento comenzando desde el margen superior es la siguiente:
h1{
margen: arriba a la derecha abajo a la izquierda;
}
2. No es necesario pasar cuatro valores de atributo en el atributo de margen. Se divide en las siguientes situaciones:
·Cuando solo haya un valor, se especificará este valor. Da los cuatro lados.
·Cuando hay dos valores, el primer valor coincide con la parte superior e inferior, y el segundo valor coincide con la izquierda y la derecha.
·Cuando hay tres valores, el primer valor coincide con la parte superior, el segundo valor coincide con la izquierda y la derecha y el tercer valor coincide con la parte inferior.
·Cuando haya cuatro valores, se emparejarán en el orden de arriba, derecha, abajo e izquierda (es decir, en el sentido de las agujas del reloj).
El ejemplo es el siguiente:
h1{margin: 1px;}//Equivalente a h1{1px 1px 1px 1px}
h1 {margin: 0.5 px 1px ;}// Equivalente a h1{0.5px 1px 0.5px 1px }
h1 {margin: 0.25px 1px?0.5px;}//Equivalente a h1{?0.25px 1px 0.5px 1px}
3. Sintaxis para configurar márgenes de uno o varios lados
//Establezca el margen hacia arriba en 20px.
h1{margin-top: 20px;}
//Establece los márgenes superior e izquierdo en 20px
h1{margin-top: 20px margin-; left: 20px;}
2. Atributo de relleno El atributo de relleno es un atributo que establece el margen interno de un elemento determinado. Al igual que el atributo de margen, también es la abreviatura de los cuatro atributos de margen interno, cuatro. Los atributos de relleno son: padding-top, padding-right, padding-bottom y padding-left. Su uso es similar al del atributo de margen, por lo que no se explicará aquí.
3. La diferencia entre el atributo de relleno y el atributo de margen
La diferencia entre el atributo de relleno y el atributo de margen Esto involucra el modelo de caja en CSS. La siguiente figura es una ilustración de un modelo de caja. Cuando su navegador muestra un elemento, el elemento ocupa una cierta cantidad de espacio. Este espacio consta de cuatro partes. El medio es el área donde el elemento representa su contenido.
El exterior de esta área está acolchado. Luego afuera está la frontera. El más externo es el margen, que separa el elemento de otros elementos. El atributo de relleno establece la distancia entre el cuadro de contenido y el borde, mientras que el atributo de margen establece la distancia entre el borde exterior del elemento y otros elementos. Ésta es su diferencia. Todos estos contenidos son conocimientos básicos en CSS. Hay una introducción relevante en un sitio web llamado Miaomiaoxue. Si está interesado, puede echarle un vistazo.