Como usar el padding en CSS
Por: Laru | Categoría: HTML & CSS
El padding y el margin son dos propiedades pertenecientes al CSS utilizadas para separar dos elementos. Por ejemplo: un bloque de texto de su contenedor, una imagen de una contigua, un bloque de una página del header o del footer. Dependiendo de cada ocasión debemos elegir entre espaciar con margin o espaciar con padding, he aquí unos pequeños consejos que no por su simplicidad dejan de ser extramadamente útiles.
He aquí una imagen que me servirá para explicarles la diferencia entre una propiedad y la otra. En este post me centraré en explicarles el correcto uso del padding.
El padding es un espaciado que se mide o se establece por dentro de la div, es decir, adoptará las propiedades de fondo (background) y bordes (border) aplicados.
En una div podemos diferenciar cuatro zonas de padding:
Formas de expresar el padding correctamente:
1)
.ejemplo {
padding-top: \valor\ /unidad/;
padding-right: \valor\ /unidad/;
padding-bottom: \valor\ /unidad/;
padding-left: \valor\ /unidad/;
}
\valor\ = Valor del espaciado a utilizar
\unidad\ = Unidad en que expresaremos el espaciado (px, %, em)
Ejemplo:
.ejemplo {
padding-top: 26px;
padding-right: 31px;
padding-bottom: 18px;
padding-left: 32px;
}
2)
padding: TOP RIGHT BOTTOM LEFT;
Con esta sintaxis debemos ser más cuidadosos ya que el orden que presentan los valores es inalterable, siempre va primero el padding-top, luego el padding-right, luego el padding-bottom y por último el padding-left.
Ejemplo: Si se nos presenta esta situación por ejemplo, sería lo mismo escribir los valores de este modo:
.ejemplo {
padding-top: 26px;
padding-right: 31px;
padding-bottom: 18px;
padding-left: 32px;
}
a escribirlos con la siguiente sintaxis:
.ejemplo {
padding: 26px 31px 18px 32px;
}
3)
Cuando se cumplen las mismas medidas en padding-top y padding-bottom se puede simplificar en un solo valor. Igualmente ocurre cuando los valores de padding-right y padding-left coinciden. Hay que tener en cuenta en esta ocasión que el padding correspondiente a padding-top y padding-bottom se coloca primero y el que corresponde al padding de los costados (padding-right y padding-left) se coloca en segundo lugar. Para aclarar veamos algunos ejemplos:
.ejemplo {
padding: \valor padding-top & padding-bottom\/unidad/ \valor padding-right & padding-left\/unidad/
}
Ejemplo: Si los valores que tengo son estos:
.ejemplo {
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
}
Puede simplificarse en:
.ejemplo {
padding: 25px 15px;
}
4)
Cuando todos los espaciados compartirán el mismo valor podemos simplificar aún más y colocarlos juntos
.ejemplo {
padding: \valor\/unidad/
}
Ejemplo: Estos valores
.ejemplo {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
pueden expresarse de la siguiente manera:
.ejemplo {
padding:5px;
}
Tal vez te interese...
Cómo crear un estilo zebra en una tabla o lista
Scrolltop con Javascript
CSS | Cómo hacer bordes múltiples con CSS
WordPress | Diferentes estilos css por categoría
Nivo Slider: Slideshow de imagenes JQuery
Photoshop: Efectos en fotos [Luces]
WordPress: como crear un login personalizado sin plugin
Como instalar y crear un template para Joomla
Photoshop: Como eliminar personas o elementos de una foto
Si deseas agregar un código a tu comentario por favor usa el siguiente formato: <pre name="code" class="php">Tu código</pre>. Puedes reemplazar la clase con "js", "css", "sql", o "html". Si el código tiene algún "<" o ">" en tu código reemplazalo con: < y > respectivamente.