CSS, divs anidados & amp; márgenes versus relleno

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

Pregunta

entiendo totalmente el modelo de caja. Esta pregunta es más acerca de tratar de precisar una metodología semántica sobre cuándo usar márgenes y cuándo usar relleno.

aquí hay un ejemplo típico,

primero, en inglés simple:

  • situación: tenemos un contenedor div, dentro del cual hay un elemento de párrafo.

  • objetivo: tener un espacio de 12px entre el interior del div y el exterior del párrafo.

  • opción a) aplique 12px de relleno al contenedor div

  • opción b) aplicar márgenes de 12px al elemento de párrafo

o, si lo prefiere, HTML: 

<div id="container">
    <p>Hello World!</p>
</div>

y, CSS:

opción a) 

div#container {padding: 12px;}

opción b) 

p {margin: 12px;}

¡Salud!

Jon

¿Fue útil?

Solución

Personalmente, prefiero la opción A. ¿Por qué? Digamos ahora que tengo que agregar otros elementos HTML en el div y quiero que se mantenga el relleno, no tendría que agregar otras reglas a mis archivos CSS para que funcione.

Otros consejos

Los rellenos y los márgenes dan el mismo efecto, excepto en los siguientes casos (podría extrañar algunos):

  1. Tienes algún tipo de propiedades de fondo. Los márgenes no los obtendrán.
  2. Tienes un borde
  3. Utiliza TD (sin márgenes)
  4. Dos elementos anidados, los márgenes se contraen, donde los rellenos no.
  5. (necesita verificar esto) Probablemente afectan el ancho y la altura del elemento de manera diferente. (Si alguien sabe mejor, por favor edite esto).

Esto es un error en css, Aquí hay ejemplos:

http://creexe.zxq.net/div-issue-padding.html = problema de relleno

http://creexe.zxq.net/div-issue-margin.html = problema de margen

las etiquetas div rojas y verdes en los ejemplos fueron creadas por la propiedad css TOP, pero tiene sus propias desventajas de que TOP, BOTTOM, etc. funciona solo cuando la posición de la etiqueta div es Absoluta y relativa, pero no estática

Depende de lo que intentes lograr visualmente. ¿El contenedor tendría otros elementos secundarios que podrían colgar en la canaleta a ambos lados del párrafo? Si es así, un margen tiene más sentido. Pero si el container debe tener una canaleta de 12 píxeles para todos los elementos, punto, tiene más sentido usar el relleno para evitar tener que aplicar márgenes a conjuntos de elementos múltiples.

En términos generales, siempre desea que los párrafos tengan márgenes verticales para garantizar un inicio de párrafo consistente.

Personalmente, iría con la opción a de #container {padding: 12px;} porque deja muy claro que todos elementos secundarios deben mantenerse a 12px del borde de este div.

Si quiero que otros elementos permanezcan a más de 12px del borde de #container , entonces aplico tanto más margen a ese elemento.

¡Salud!

Relleno vertical en la división: porque si decidiera que quería una cantidad diferente de espacio vertical entre los múltiples párrafos, usaría los márgenes inferiores, y el relleno superior / inferior de la división adjunta siempre permanecerá intacto suponiendo solo tiene elementos posicionados estáticamente dentro.

La diferencia es dónde se encuentra el borde.

El borde se encuentra SMACK DAB en el medio de los márgenes y el relleno. Si especifica márgenes, ese es el espacio en blanco FUERA del borde.

Si especifica el relleno, es un espacio en blanco DENTRO del borde (empuja el borde más hacia afuera del elemento)

No puedo mostrarte aquí debido a la eliminación de CSS, pero prueba esto: 

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

¡otras cosas!

  • el relleno aporta el color de fondo del elemento, los márgenes son básicamente transparentes

  • algunos elementos (como td) parecen ignorar los márgenes, mientras responden a los cambios en el relleno

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top