Ignorar el relleno de los padres

126

Estoy tratando de hacer 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;
}

Encontrará que la regla horizontal se extiende fuera del padre en 10px. Estoy tratando de hacer 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.

html css

— Sam
fuente

160

Solución fácil, solo hazlo

margin:-10px

en la hora

— Sam
fuente

9

Esto funciona, pero el problema es que no extenderá la longitud total del div padre. Esto se debe a que el relleno NO está incluido en el ancho de 100 píxeles, esto significa que en realidad tiene 120 píxeles de ancho y <hr>tendrá 20 píxeles desde el final de su div. Vea este jsFiddle para lo que quiero decir: jsfiddle.net/YVrWy/1

— Alastair Pitts el

Sí, lo resolví cuando lo agregué; El ancho es irrelevante.

— Sam

22

si necesita 100% de ancho, solo use auto como atributo de ancho. El ancho se calculará con respecto a los márgenes dados.

— schlingel

44

Debería hacer algo como ... margen: 0 -15px; ..... de lo contrario, el hr absorberá verticalmente el contenido adyacente hacia él.

— honkskillet

un poco hack Ojalá hubiera una mejor manera

— oldboy

29

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
}

— adriancho5692
fuente

8

Pero, ¿qué pasa si no necesariamente conoces el relleno de los padres?

1

Esto funcionó para mí cuando uso min-width, en lugar de solo ancho.

— Pedro Nadolny

@ user5707327 siempre puede combinar estilos con javascript para obtener el relleno de los padres

— adriancho5692

¡Guau, genial uso de anchos negativos!

— Mr PizzaGuy

9

En general, esta pregunta ha sido respondida pero en pequeñas partes por todos. Me ocupé de esto hace solo un minuto.

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

.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 están compensados por cualquier relleno primario con márgenes negativos coincidentes en el secundario. Entonces es más importante si desea ejecutar el ancho completo secundario y luego establecer el ancho en automático. (como se menciona en un comentario anterior de schlingel ).

— Mitchell Geere
fuente

7

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: ejemplo de violín.

— sqram
fuente

1

Debería dividir el relleno a la derecha: 60px a relleno a la izquierda: 30px; relleno a la derecha: 30px, para que el contenido no se desplace cuando utilice text-align: center;

— Lucas

3

margin: 0 -10px;

es mejor que

margin: -10px;

El último absorbe contenido verticalmente en él.

— honkskillet
fuente

2

Su padre tiene 120 píxeles de ancho, es decir, 100 de ancho + 20 de relleno en cada lado, por lo que debe hacer que su línea tenga 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;
}

— easwee
fuente

1

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

— Guilherme Ferreira

@GuilhermeFerreira Usar width: auto;en hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Desafortunadamente, esta solución aún requiere conocimiento paddingestablecido por el padre.

— ToolmakerSteve

1

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

Cuando IE está en modo peculiar, widthes 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 = 80pxen cuyo caso su ancho de 100 px <hr>no se verá bien.

Si está en modo estándar, widthes el ancho interno de su caja, y el relleno se agrega afuera. Entonces, el ancho total de la caja 100px + 2 * 10px = 120pxdeja exactamente 100 píxeles dentro de la caja para su <hr>.

Para resolverlo, ajuste sus valores CSS para IE. (Verifique en Firefox para ver si se ve bien allí). O incluso mejor, configure un tipo de documento para poner el navegador en modo estricto, donde también IE 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

— Martin Algesten
fuente

1

Si tiene un contenedor principal con relleno vertical y desea que algo (por ejemplo, una imagen) dentro de ese contenedor ignore su relleno vertical, puede establecer un margen negativo, pero igual, tanto para 'arriba' como para 'abajo':

margin-top: -100px;
margin-bottom: -100px;

El valor real no parece importar mucho. No he probado esto para rellenos horizontales.

— Marnix.hoh
fuente

0

solución fácil ... agregar a div div:

tamaño de la caja: border-box;

— Jaclyn U
fuente

0

Aquí hay otra forma de hacerlo.

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

Aquí hay algunos ejemplos en repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Dillon Burnett
fuente