Relleno de la parte superior e inferior del elemento en línea

Question

Cita de Head first html:

  

Puede agregar relleno en la parte superior e inferior del elemento en línea, pero el relleno no afecta el espaciado de los otros elementos en línea a su alrededor, por lo que el relleno se superpondrá con otros elementos en línea

a) Hasta donde entiendo la cita anterior, agregar relleno en la parte superior e inferior del elemento en línea (¿nunca) tiene ningún efecto en los elementos circundantes y, por lo tanto, en el aspecto de la página?

b) Pero, ¿qué se entiende exactamente por " relleno se superpondrá con otros elementos en línea "? ¿Acaso sugiere que, en ciertas circunstancias, el relleno (parte superior e inferior de un elemento en línea) tendrá efecto en el aspecto de la página ?!

gracias

Answer 1

Si entiendo correctamente, y de un ejemplo acabo de hacer :

a) el texto es un elemento en línea, por lo que agregar un espacio con relleno superior e inferior no empuja las otras líneas hacia abajo

b) como puede ver, dado que he agregado un color al tramo, el color se superpondrá a las otras líneas.

Espero que esto sea correcto y responda su pregunta: D

Answer 2

Use inline-block en su lugar. Agregue estas propiedades a todos los elementos en los que desea agregar relleno. Por ejemplo:

a:link {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
}

Answer 3

Prueba esto:

<style type="text/css">
  div { background: blue; height: 4em; padding: 1em }
  span { background: red; padding: .5em; }
</style>

<div>
  <span>one</span>
  <br/>
  <span>two</span>
</div>

Answer 4

El relleno afectará al elemento mismo. Por ejemplo, cualquier texto dentro del elemento estará más relleno de otros elementos DOM.