Ignorar el relleno principal

Estoy intentando que mi regla horizontal ignore el relleno principal.Ignorar el relleno principal

Aquí está un ejemplo sencillo de lo que tengo:

#parent { 
padding:10px; 
width:100px; 
} 
hr { 
width:100px; 
}

Usted encontrará que la regla horizontal se extiende fuera de la matriz por 10px. Intento que ignore el relleno que todo lo demás en el div padre necesita.

Soy consciente de que podría hacer un div por separado para todo lo demás; esta no es la solución que estoy buscando.

Fuente

2010-11-28 Sam

solución fácil, acaba de hacer

margin:-10px

sobre la hora.

Fuente

2010-11-28 11:39:19 Sam

Esto funciona, pero el problema es que no se extenderá por toda la longitud de la div padre. Esto se debe a que el relleno no está incluido en el ancho de 100 píxeles, lo que significa que tiene 120 píxeles de ancho, y su '

' tendrá 20 píxeles desde el final de su div. Vea este jsFiddle para lo que quiero decir: http://jsfiddle.net/YVrWy/1/ –

Sí, lo resolví cuando lo agregué; el ancho es irrelevante – Sam

+12

si necesita un ancho del 100%, solo use el atributo automático como ancho. El ancho se calculará con respecto a los márgenes dados. – schlingel

El problema podría ser qué modelo de caja está utilizando. ¿Estás usando IE?

Cuando IE está en modo peculiar, width es el ancho exterior de su cuadro, lo que significa que el relleno estará dentro. Entonces, el área total que queda dentro de la caja es 100px - 2 * 10px = 80px, en cuyo caso su 100px de ancho <hr> no se verá bien.

Si está en modo estándar, width es el ancho interior de su cuadro, y el relleno se agrega al exterior. Entonces, el ancho total de la caja es 100px + 2 * 10px = 120px dejando exactamente 100 px dentro de la caja para su <hr>.

Para resolverlo, ajuste sus valores CSS para IE. (Compruebe en Firefox para ver si se ve bien allí). O mejor aún, configure un tipo de documento para activar el navegador en modo estricto, donde IE también sigue el modelo de caja estándar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
     "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
...

http://www.quirksmode.org/css/quirksmode.html

Fuente

2010-11-28 12:16:32

Su padre es de 120 píxeles de ancho - es decir 100 ancho + 20 relleno en cada lado por lo que necesita para hacer su línea de 120 píxeles de ancho. Aquí está el código. La próxima vez, tenga en cuenta que el relleno se suma al ancho del elemento.

#parent 
{ 
    width: 100px; 
    padding: 10px; 
    background-color: Red; 
} 

hr 
{ 
    width: 120px; 
    margin:0 -10px; 
    position:relative; 
}

Fuente

2010-11-28 12:19:14 easwee

Con ancho definido es fácil. El problema es cuando no conoce el ancho –

Un poco late.But sólo se necesita un poco de matemáticas.

.content { 
    margin-top: 50px; 
    background: #777; 
    padding: 30px; 
    padding-bottom: 0; 
    font-size: 11px; 
    border: 1px dotted #222; 
} 

.bottom-content { 
    background: #999; 
    width: 100%; /* you need this for it to work */ 
    margin-left: -30px; /* will touch very left side */ 
    padding-right: 60px; /* will touch very right side */ 
} 

<div class='content'> 

    <p>A paragraph</p> 
    <p>Another paragraph.</p> 
    <p>No more content</p> 


    <div class='bottom-content'> 
     I want this div to ignore padding. 
    </div>

No tengo Windows, así que no lo probé en IE.

violín: fiddle example..

Fuente

2013-01-07 20:19:31 sqram

Debe dividir el relleno a la derecha: 60px a relleno-izquierda: 30px; relleno -derecha: 30px, para que el contenido no se desplace cuando usa text-align: center; – Luke

margin: 0 -10px;

es mejor que

margin: -10px;

La tarde chupa el contenido verticalmente en ella.

Fuente

2015-03-04 01:23:10 honkskillet

En general, esta pregunta ha sido respondida pero en partes pequeñas por todos. Trate esto hace un minuto.

Quería tener una bandeja de botones en la parte inferior de un panel donde el panel tiene 30px alrededor. La bandeja del botón tenía que estar al ras del fondo y los lados.

.panel 
{ 
    padding: 30px; 
} 

.panel > .actions 
{ 
    margin: -30px; 
    margin-top: 30px; 
    padding: 30px; 
    width: auto; 
}

hice una demostración here con más carne para impulsar la idea. Sin embargo, los elementos clave anteriores se compensan con cualquier margen parental con márgenes negativos coincidentes en el elemento secundario. Entonces, lo más crítico es si desea ejecutar el ancho completo del niño y luego establecer el ancho en automático. (como se menciona en un comentario anterior por schlingel).

Fuente

2015-08-29 07:26:26

con fines de imagen que puede hacer algo como esto

img { 
    width: calc(100% + 20px); // twice the value of the parent's padding 
    margin-left: -10px; // -1 * parent's padding 
}

Fuente

2017-08-10 13:27:39 adriancho5692

Respuesta

Cuestiones relacionadas