CSS Relleno Posicionamiento vs.

El relleno y el posicionamiento son dos propiedades de CSS (Cascading Style Sheets) que afectan al tamaño de cualquier elemento HTML, como divs, tablas o párrafos. El uso de estas dos propiedades, en relación uno con el otro a veces resulta difícil porque el relleno se añade a las dimensiones generales de cualquier elemento. Utilice el modelo de caja de visualizar lo que estas propiedades hacen diferentes.

El modelo de caja CSS

El modelo de caja define cómo calcular las dimensiones de los navegadores, relleno, márgenes y los bordes de cada elemento HTML. Sea o no un elemento tiene la forma como tal, se puede pensar en ella como una caja rectangular. Contenido, las fronteras y el relleno van dentro de la caja. Los márgenes van fuera del área. El modelo se aplica tanto a los elementos en línea y los elementos a nivel de bloque.

Relleno

El relleno añade espacio alrededor del contenido dentro de un elemento HTML. Considere un div que contiene un bloque de texto. Cuando se aplica un fondo a la div sin añadir el relleno, el texto va a tocar los bordes del fondo. Dado que esto no es atractivo en una página web, que tiene sentido para añadir un poco de espacio por lo que el fondo es más grande que el texto. Relleno logra esto.

posicionamiento

En CSS, puede colocar elementos usando ya sea el pariente o métodos absolutos. Cuando se agrega un div a la parte inferior de su código HTML y darle una posición absoluta de cero píxeles desde la parte superior ya la izquierda de la página, que flotará hasta la esquina superior izquierda de la pantalla del navegador. En el posicionamiento relativo, una posición de 0 píxeles superior e izquierda no hace nada, pero una posición de 20 píxeles desde la izquierda mueve el elemento 20 píxeles a la izquierda de donde normalmente mostrará en la pantalla. Los elementos con posicionamiento absoluto anidadas dentro de los elementos con posicionamiento relativo toman sus coordenadas del elemento contenedor.

Efectos de relleno en Posicionamiento

Aunque el relleno añade espacio entre el borde del elemento de HTML y su contenido, todavía se suma a la anchura del elemento. Cuando se agrega 20 píxeles de relleno alrededor de todos los lados de un div dado un ancho de 200 píxeles, el nuevo ancho del div se convierte en 240 píxeles. Tenga esto en cuenta al colocar elementos de la página en el CSS. Por ejemplo, si se utiliza el posicionamiento absoluto durante dos divs en la página con la intención de apilar una sobre la otra, y el div parte superior es de 100 píxeles de altura, con 20 píxeles de desplazamiento de todo, entonces el siguiente div tiene que ir a 140 píxeles hacia abajo en la pagina.