Pregunta Ignorar el relleno de los padres


Estoy intentando que mi regla horizontal ignore el relleno principal.

Aquí hay un ejemplo simple de lo que tengo:

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

Descubrirá que la regla horizontal se extiende a los padres en 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.


75
2017-11-28 11:32


origen


Respuestas:


Solución fácil, solo hazlo

margin:-10px

en la hora


102
2017-11-28 11:39



Un poco tarde. Pero solo requiere un poco de matemática.

.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 probé esto en IE.

violín: violín ejemplo ..


7
2018-01-07 20:19



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 aquí 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)


6
2017-08-29 07:26



Para fines de imagen 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
}

6
2017-08-10 13:27



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

Cuando IE está en modo peculiar, width es el ancho exterior de su caja, 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 ancho de 100 px <hr> no se verá bien.

Si estás en modo estándar, width es el ancho interno de su caja, y el relleno se agrega afuera. 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, ajusta tus valores de 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


1
2017-11-28 12:16



Tu padre tiene 120px de ancho, es decir, 100 anchuras + 20 almohadillas en cada lado, así que necesitas hacer que tu línea tenga 120px 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;
}

1
2017-11-28 12:19



margin: 0 -10px; 

es mejor que

margin: -10px;

El último chupa contenido verticalmente en él.


0
2018-03-04 01:23