Ignorer le remplissage du parent

127

J'essaie d'obtenir ma règle horizontale pour ignorer le rembourrage parent.

Voici un exemple simple de ce que j'ai:

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

Vous constaterez que la règle horizontale s'étend hors du parent de 10 px. J'essaie de faire en sorte qu'il ignore le rembourrage dont tout le reste de la division parent a besoin.

Je suis conscient que je pourrais créer un div séparé pour tout le reste; ce n'est pas la solution que je recherche.

html css

— Sam
source

160

Solution facile, faites simplement

margin:-10px

sur l'heure.

— Sam
source

9

Cela fonctionne, mais le problème est que cela ne s'étendra pas sur toute la longueur de la div parent. En effet, le remplissage n'est PAS inclus dans la largeur de 100px, cela signifie qu'il est en fait de 120px de large et que vous <hr>serez à 20px de la fin de votre div. Voir ce jsFiddle pour ce que je veux dire: jsfiddle.net/YVrWy/1

— Alastair Pitts

Ouais j'ai travaillé ça quand je l'ai ajouté; la largeur n'a pas d'importance.

— Sam

22

si vous avez besoin d'une largeur de 100%, utilisez simplement auto comme attribut de largeur. La largeur sera calculée par rapport aux marges données.

— schlingel

4

Vous devriez faire quelque chose comme ... margin: 0 -15px; ..... sinon le hr aspirera verticalement le contenu adjacent vers lui.

— honkskillet

un peu hackish. souhaite qu'il y ait un meilleur moyen

— oldboy

29

À des fins d'image, vous pouvez faire quelque chose comme ça

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

— adriancho5692
source

8

Mais que faire si vous ne connaissez pas nécessairement le rembourrage des parents?

1

Cela a fonctionné pour moi lorsque j'utilise min-width, au lieu de juste width.

— Pedro Nadolny

@ user5707327 vous pouvez toujours combiner les styles avec javascript pour obtenir le remplissage du parent

— adriancho5692

wow, utilisation géniale des largeurs négatives!

— Mr PizzaGuy le

9

En gros, cette question a été répondue mais en petites parties par tout le monde. J'en ai traité il y a à peine une minute.

Je voulais avoir un plateau de boutons au bas d'un panneau où le panneau a 30px tout autour. Le plateau à boutons devait être au même niveau que le fond et les côtés.

.panel
{
  padding: 30px;
}

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

J'ai fait une démo ici avec plus de chair pour conduire l'idée. Cependant, les éléments clés ci-dessus sont décalés de tout remplissage parent avec des marges négatives correspondantes sur l'enfant. Ensuite, le plus critique si vous souhaitez exécuter l'enfant en pleine largeur, définissez la largeur sur auto. (comme mentionné dans un commentaire ci-dessus par schlingel ).

— Mitchell Geere
source

7

Un peu tard, mais il faut juste un peu de calcul.

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

Je n'ai pas Windows donc je n'ai pas testé cela dans IE.

violon: exemple de violon.

— sqram
source

1

Vous devez diviser le padding-right: 60px en padding-left: 30px; padding-right: 30px, de sorte que le contenu ne soit pas décalé lorsque vous utilisez text-align: center;

— Luke

3

margin: 0 -10px;

est mieux que

margin: -10px;

Le dernier aspire le contenu verticalement dedans.

— klaxon
source

2

Votre parent mesure 120 px de large - soit 100 largeur + 20 rembourrage de chaque côté, vous devez donc faire une ligne de 120 px de large. Voici le code. La prochaine fois, notez que le remplissage s'ajoute à la largeur de l'élément.

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

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

— easwee
source

1

Avec une largeur définie, c'est facile. Le problème, c'est quand vous ne connaissez pas la largeur

— Guilherme Ferreira

@GuilhermeFerreira Utilisation width: auto;dans hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Malheureusement, cette solution nécessite toujours de connaître la paddingconfiguration par le parent.

— ToolmakerSteve

1

Le problème peut venir du modèle de boîte que vous utilisez. Utilisez-vous IE?

Lorsque IE est en mode bizarreries, widthcorrespond à la largeur extérieure de votre boîte, ce qui signifie que le rembourrage sera à l'intérieur. Donc, la surface totale laissée à l'intérieur de la boîte est 100px - 2 * 10px = 80pxdans ce cas, votre largeur de 100 pixels <hr>ne sera pas correcte.

Si vous êtes en mode standard, widthest la largeur intérieure de votre boîte, et un rembourrage est ajouté à l'extérieur. Ainsi, la largeur totale de la boîte 100px + 2 * 10px = 120pxlaisse exactement 100 pixels à l'intérieur de la boîte pour votre <hr>.

Pour le résoudre, ajustez vos valeurs CSS pour IE. (Vérifiez dans Firefox pour voir si cela vous convient). Ou mieux encore, définissez un type de document pour faire passer le navigateur en mode strict - où IE suit également le modèle de boîte 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
source

1

Si vous avez un conteneur parent avec un remplissage vertical et que vous voulez que quelque chose (par exemple une image) à l'intérieur de ce conteneur ignore son remplissage vertical, vous pouvez définir une marge négative, mais égale, pour les deux 'haut' et 'bas':

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

La valeur réelle ne semble pas avoir beaucoup d'importance. Je n'ai pas essayé cela pour les rembourrages horizontaux.

— Marnix.hoh
source

0

solution facile .. ajouter au div parent:

box-dimensionnement: border-box;

— Jaclyn U
source

0

Voici une autre façon de procéder.

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

Voici quelques exemples sur repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Dillon Burnett
source