Elemento ignora el acolchado del elemento contenedor

que tiene la siguiente/CSS código HTML:Elemento ignora el acolchado del elemento contenedor

<div id="container" style="padding:5px; width:600px;"> 
    <div id="panel"> 
     <a style="padding:5px; color:#ffffff; background-color:#000000;">Page 1</a> 

     <!-- Other anchor elements --> 
    </div> 

    <!-- Other panels --> 
</div>

me cuesta entender por qué el elemento #panel se sienta cómodamente dentro del #container; obedeciendo las reglas de relleno, mientras que el relleno del elemento de anclaje dentro del #panel se superpone al #container. ¿Le importaría a alguien explicar por qué este es el caso, y al hacerlo, tal vez sugiera una solución?

Fuente

2012-09-05 TheBoss

Creo que porque esto es un elemento en línea esto ocurre, si cambia su pantalla a inline-block, el relleno ya no se solapa. DEMO

Fuente

2012-09-05 02:53:53 Musa

Gracias, esto funciona, pero ¿sabe por qué los elementos en línea se comportan de la manera que describí en el PO? – TheBoss

@TheBoss vea [this] (http://stackoverflow.com/questions/1401140/padding-the-top-and-the-bottom-of-inline-element) pregunta – Musa

Gracias. Sin embargo, me gustaría que hubiera una buena razón para este comportamiento, o si existe, un recurso que explique por qué. – TheBoss

-1

@Musa es correcto, el elemento de anclaje del elemento debe establecerse en display:inline block; o display:block y establecer un ancho.

Fuente

2012-09-05 03:38:07

Elemento ignora el acolchado del elemento contenedor

Respuesta

Cuestiones relacionadas