¿Necesita agregar espacio a los elementos HTML? Pruebe el acolchado CSS

¿Necesita agregar espacio a los elementos HTML? Pruebe el acolchado CSS

¿Necesita agregar espacio a los elementos HTML? Pruebe el acolchado CSS

VALORACIÓN DEL ARTÍCULO:
5/5


El relleno CSS es una de las propiedades del modelo de caja CSS. Esta propiedad abreviada establece el relleno alrededor de los cuatro lados de un elemento HTML. El relleno CSS se puede aplicar a casi todas las etiquetas HTML (excepto a algunas de las etiquetas de la tabla). Además, los cuatro lados del elemento pueden tener un valor diferente.

Propiedad de relleno CSS

Para usar la propiedad de acolchado CSS abreviado, puedes usar la mnemotécnica «TRouBLe» (o «TRiBbLe» para tus fans de Star Trek). Esto significa top , right , bottom , and left , y left , y se refiere al orden de los anchos de relleno que se establecen en la propiedad shorthand. Por ejemplo:

acolchado: 1px 2px 3px 6px;

Si usó los valores listados arriba, aplicaría un valor de relleno diferente a cada lado de cualquier elemento HTML al que lo esté aplicando. Si quieres aplicar el mismo relleno en los cuatro lados, puedes simplificar tu CSS y escribir un solo valor:

Con esa línea de CSS, 12 píxeles de relleno se aplicarían a los 4 lados del elemento.

Si desea que el relleno sea el mismo para la parte superior e inferior y para la izquierda y la derecha, puede escribir dos valores:

El primer valor (24px) se aplicaría a la parte superior e inferior, mientras que el segundo se aplicaría a la izquierda y derecha.

Si escribes tres valores, el acolchado horizontal (izquierda y derecha) será el mismo, mientras cambias la parte superior e inferior:

acolchado: 0px 1px 3px;

Según el modelo de caja CSS, el acolchado es el más cercano al elemento/contenido en sí. Esto significa que el relleno se añade a un elemento entre la anchura o la altura del contenido y cualquier valor de borde que utilice. Si el relleno se pone a cero, entonces tiene el mismo borde que el contenido.

Valores de relleno de CSS

El relleno CSS puede tomar cualquier valor de longitud no negativo. Asegúrese de especificar la medida, como px o em. También puede especificar un porcentaje para su relleno, que será un porcentaje del ancho del bloque que contiene el elemento. Esto incluye el acolchado superior e inferior. Por ejemplo:

#contenedor { ancho: 800px; alto: 200px; }
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>»>>>>>>>>>>>>>>>>>>»>>>>>>>>>>>>»>>>>>>>>>»>>>>>»>>>>>>»>>>>»>>>>>»>>>>>>»>.#contenedor p { ancho: 400px; alto: 75%; acolchado: 25% 0; }

La altura del párrafo dentro del elemento #contenedor será el 75% de la altura del #contenedor #contenedor más el 25% de la anchura para el relleno superior y el 25% de la anchura para el inferior. Esto suma 300 + 200 + 200 = 700px.

Efectos de la adición de relleno de CSS

En los elementos a nivel de bloque, el acolchado se aplica en los cuatro lados. Debido a que el elemento ya es un bloque o una caja, el acolchado se aplica a los lados de la caja.

Cuando se añade relleno CSS a los elementos en línea, puede haber cierta superposición de elementos por encima y por debajo del elemento en línea si el relleno vertical excede la altura de la línea, pero no empujará la altura de la línea hacia abajo. El acolchado CSS horizontal aplicado a los elementos en línea se añadirá al principio del elemento y al final del elemento. Y el relleno puede envolver las líneas. Pero no se aplicará a todas las líneas de un elemento multilínea, por lo que no se puede utilizar el relleno para sangrar un segmento de contenido multilínea en línea.

Además, en CSS2.1, no se pueden crear bloques de contenedores donde el ancho depende de un elemento con porcentajes para anchos (o anchos de relleno). Si lo hace, el resultado es indefinido. Los navegadores seguirán mostrando el contenido, pero es posible que no obtenga los resultados que espera. Si lo piensas, tiene sentido, como si tu elemento contenedor necesitara saber el ancho de sus elementos hijo para definir su ancho – como cuando no tiene un ancho predefinido, y uno o más tiene un ancho establecido como un porcentaje del elemento contenedor, esto crea una cadena circular sin respuesta. Si utiliza porcentajes para los anchos de cualquier cosa en su documento, debe asegurarse de que los anchos del elemento padre también estén definidos.

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,