attribute - html5 tags list

Cuando un elemento secundario se desborda horizontalmente, ¿por qué se ignora el relleno correcto del padre?

Question

Dada esta estructura simple:

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

con este CSS:

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

Demostración en vivo: http://jsfiddle.net/523me/5/

Observe que el padre tiene un relleno de 20px y que el niño se desborda horizontalmente (porque es más ancho). Si desplaza el elemento primario hacia la derecha, verá que el elemento toca el borde derecho del elemento primario.

Por lo tanto, el padre debe tener un relleno correcto, pero se ignora. Parece que cuando el niño tiene un ancho fijo, no se aplica el relleno correcto del padre. (¿Está especificado por un estándar? Me encantaría saber. ¡Por favor, avíseme si encuentra algo!)

¿Hay alguna manera de forzar que se aplique el relleno correcto en este escenario sin tener que eliminar ninguno de los elementos del flujo (mediante flotación o posicionamiento)?

Captura de pantalla 1: el relleno derecho se ignora. Así es como se comportan todos los navegadores actuales.

Captura de pantalla 2: se aplica el relleno correcto. Esto es lo que intento lograr. (Por cierto, la captura de pantalla es de IE7, que es el único navegador que no ignora el relleno correcto).

Answer 1

Aplique relleno -a la derecha al elemento desbordante mismo, y mueva el fondo a su elemento hijo directo.

<div id="parent">
    <div id="child"><div>Lorem ipsum...</div></div>
</div>

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/

Answer 2

Estás sufriendo de this problema.

Lo resolvería dando un margen al niño (y no un relleno al padre):

#parent {
    width: 200px;
    height: 200px;
    overflow-x: scroll;
    background: gray;
}

#child {
    width: 500px;
    background: yellow;  
    display: inline-block;
    margin: 20px; 
}

Demostración: jsFiddle

Answer 3

No sé, pero agregando:

#child{
  display: inline-block;
}

Parece arreglarlo: http://jsfiddle.net/523me/6/

Solo probé en Chrome más reciente, puede que no sea un navegador cruzado

Answer 4

No, el relleno no se ignora, pero aún está dentro del elemento principal.

Consulte jsFiddle actualizado , donde puede ver que el relleno no se ha movido desde su posición original.

Editar: Hm, hay algunas anomalías. Si le das al div interno un margen derecho, también se ignorará. Hm. Votando tu pregunta.

Answer 5

Puede cambiar el relleno a un borde.

padding: 20px;

a

border: 20px solid gray;