Ignora il riempimento del genitore

127

Sto cercando di fare in modo che la mia regola orizzontale ignori il riempimento genitore.

Ecco un semplice esempio di quello che ho:

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

Scoprirai che la riga orizzontale si estende fuori dal genitore di 10 px. Sto cercando di far sì che ignori il riempimento di cui ha bisogno tutto il resto nel div genitore.

Sono consapevole che potrei creare un div separato per tutto il resto; questa non è la soluzione che cerco.

html css

— Sam
fonte

160

Soluzione facile, fallo e basta

margin:-10px

in hr.

— Sam
fonte

9

Funziona, ma il problema è che non estenderà l'intera lunghezza del div genitore. Questo perché l'imbottitura NON è inclusa nella larghezza di 100 px, questo significa che è effettivamente larga 120 px e il tuo <hr>sarà 20 px dalla fine del tuo div. Vedi questo jsFiddle per quello che voglio dire: jsfiddle.net/YVrWy/1

— Alastair Pitts

Sì, l'ho capito quando l'ho aggiunto; la larghezza è irrilevante.

— Sam

22

se hai bisogno del 100% di larghezza, usa solo auto come attributo di larghezza. La larghezza verrà calcolata rispetto ai margini dati.

— schlingel

4

Dovresti fare qualcosa come ... margin: 0 -15px; ..... altrimenti hr risuccherà verticalmente il contenuto adiacente verso di esso.

— honkskillet

un po 'hacker. vorrei che ci fosse un modo migliore

— oldboy

29

A scopo di immagine puoi fare qualcosa del genere

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

— adriancho5692
fonte

8

Ma cosa succede se non conosci necessariamente l'imbottitura del genitore?

1

Questo ha funzionato per me quando uso la larghezza minima, anziché solo la larghezza.

— Pedro Nadolny

@ user5707327 puoi sempre combinare gli stili con javascript per ottenere il riempimento del genitore

— adriancho5692

wow, utilizzo geniale delle larghezze negative!

— Mr PizzaGuy

9

In generale questa domanda ha avuto risposta ma in piccole parti da tutti. Ne ho parlato solo un minuto fa.

Volevo avere una barra dei pulsanti nella parte inferiore di un pannello in cui il pannello ha 30 px tutt'intorno. La vaschetta portabottoni doveva essere a filo fondo e lati.

.panel
{
  padding: 30px;
}

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

Ho fatto una demo qui con più carne per guidare l'idea. Tuttavia, gli elementi chiave di cui sopra sono compensati da qualsiasi riempimento padre con margini negativi corrispondenti sul figlio. Quindi la cosa più critica se si desidera eseguire il bambino a larghezza intera, quindi impostare la larghezza su auto. (come menzionato in un commento sopra di Schlingel ).

— Mitchell Geere
fonte

7

Un po 'tardi, ma ci vuole solo un po' di matematica.

.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>

Non ho Windows, quindi non l'ho testato in IE.

violino: esempio di violino ..

— sqram
fonte

1

Dovresti dividere il padding-right: 60px in padding-left: 30px; padding-right: 30px, in modo che il contenuto non sia sfalsato quando usi text-align: center;

— Luca

3

margin: 0 -10px;

è meglio di

margin: -10px;

Il successivo risucchia il contenuto verticalmente al suo interno.

— honkskillet
fonte

2

Il tuo genitore è largo 120 px, ovvero 100 larghezza + 20 imbottitura su ciascun lato, quindi devi rendere la linea larga 120 px. Ecco il codice. La prossima volta nota che il riempimento si aggiunge alla larghezza dell'elemento.

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

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

— easwee
fonte

1

Con una larghezza definita è facile. Il problema è quando non conosci la larghezza

— Guilherme Ferreira

@GuilhermeFerreira Usa width: auto;in hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Sfortunatamente, questa soluzione richiede ancora la conoscenza paddingimpostata dal genitore.

— ToolmakerSteve

1

Il problema potrebbe dipendere dal modello di scatola che stai utilizzando. Stai usando IE?

Quando IE è in modalità quirks, widthè la larghezza esterna della tua casella, il che significa che il riempimento sarà all'interno. Quindi l'area totale rimasta all'interno della scatola è 100px - 2 * 10px = 80pxnel qual caso la tua larghezza di 100 px <hr>non sembrerà corretta.

Se sei in modalità standard, widthè la larghezza interna della tua scatola e il riempimento viene aggiunto all'esterno. Quindi la larghezza totale della scatola 100px + 2 * 10px = 120pxlascia esattamente 100 px all'interno della scatola per il tuo <hr>.

Per risolverlo, regola i valori CSS per IE. (Controlla in Firefox per vedere se sembra a posto lì). O ancora meglio, imposta un tipo di documento per avviare il browser in modalità rigorosa, dove anche IE segue il modello box standard.

<!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
fonte

1

Se hai un contenitore genitore con riempimento verticale e vuoi che qualcosa (ad esempio un'immagine) all'interno di quel contenitore ignori il suo riempimento verticale, puoi impostare un margine negativo, ma uguale, sia per 'top' che 'bottom':

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

Il valore effettivo non sembra avere molta importanza. Non l'ho provato per imbottiture orizzontali.

— Marnix.hoh
fonte

0

soluzione facile .. aggiungi al div genitore:

dimensionamento scatola: border-box;

— Jaclyn U
fonte

0

Ecco un altro modo per farlo.

<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>

Ecco alcuni esempi su repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Dillon Burnett
fonte