Herramientas en línea

Modelo de caja CSS

CSS3Tutoriales básicos

Manual de referencia de CSS

Reglas de CSS (RULES)

Borde de CSS (Borde)Margen de CSS (Margen)

Relleno de CSS (Relleno)

La propiedad de padding de CSS es una propiedad abreviada que define el espacio entre el borde del elemento y el contenido del elemento, es decir, el margen interno de arriba, abajo, izquierda y derecha.

Propiedad de relleno de CSS

La propiedad de relleno de CSS le permite establecer el área de relleno que separa el borde del elemento de su contenido. El relleno estáfondo-colorinfluencia del cuadro

Definir relleno para cada cara

Puedes usar la propiedad de padding separada de CSS para especificar diferentes rellenos para diferentes lados del elemento (por ejemplo, superior, derecha, inferior o izquierda) fácilmente.

Ejemplo

h1　{
　　　　padding-bottom:　10px;
}
p　{
　　　　padding-top:　20px;
　　　　padding-left:　50px;
}

Prueba a ver‹/›

Atributo de relleno abreviado

La propiedad de padding es una propiedad abreviada que evita la necesidad de establecer el relleno para cada lado del elemento, es decirpadding-top，padding-right，padding-bottom，padding-left。

Ejemplo

h1　{
　　　　padding:　10px　20px;
}
p　{
　　　　padding:　10px　15px　20px　25px;
}

Prueba a ver‹/›

Nota:Con CSS margenLas propiedades son diferentes, los valores del atributo de relleno no pueden ser negativos. Al igual que con las propiedades de margen, los porcentajes de la propiedad de relleno se refieren al ancho del contenedor del cuadro generado.

La propiedad de padding puede tomar un, dos, tres o cuatro valores separados por espacios en blanco.

Si se configuraUn valorEntonces, se aplicará a todos los cuatro lados.
Si se especificaDos valoresEntonces, el primer valor se aplicará en la parte superior e inferior, y el segundo valor se aplicará en la derecha e izquierda.
Si se especificaTres valoresEntonces, el primer valor se aplica en la parte superior, el segundo valor se aplica en la izquierda y derecha, y el último valor se aplica en la parte inferior.
Si se especificaCuatro valoresEntonces, aplícalos en el orden especificado en la parte superior, derecha, inferior y izquierda.

Borde de CSS (Borde)Margen de CSS (Margen)