div avec des marges & padding qui doit remplir son parent

J'ai un div conteneur (il a à la fois la largeur d'une hauteur définie en pixels).

Est-il un moyen d'ajouter un enfant div qui permettra de combler l'ensemble de son parent, mais ont encore de la marge et du ou de rembourrage ?

supposons que le div parent est de 200px de large, et 200px de haut.

si je donne à l'enfant un div de largeur/hauteur de 100%, alors il suppose que je veux dire pour le contenu doivent être de taille 200px et puis si j'ajoute de rembourrage ou des marges de la taille de l'enfant devient plus grand que celui d'un parent.

Je veux l'enfant div zone de contenu à être ce que jamais est à gauche après la prise 5px marges de chaque côté...

et s'il vous plaît ne me dites pas de soustraire 2*5px de 200px - je sais, mais je suis à la recherche d'une meilleure solution.

pourrait-il que le css ne peut pas gérer une telle tâche simple...

OriginalL'auteur epeleg | 2012-01-19

  1. 10

    Vous pouvez essayer les suivantes:

    #outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

.inner {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
}

    démo: http://jsfiddle.net/wYNYh/1/

    J'aime cette solution (même si j'ai du ajouter de la 5px 4 fois) parce que 1) c'est est-ce que j'ai demandé. 2) il ne modifie pas l'élément conteneur. Merci. Si pas de meilleure solution sera de montrer que je vais accepter cette réponse.
    qu'aimeriez-vous faire à l'égard de l'absolu/ralative positions si vous voulez un #insideInner div qui sera lié à #intérieure de la même manière que #intérieure se rapporte à #extérieure?
    Vous pouvez utiliser le même fichier de nouveau. Il suffit de changer #intérieure .intérieure afin de la réutiliser en tant que classe. Il doit travailler pour pour les divs imbriqués aswell.
    J'ai changé le violon pour montrer ce que je veux dire. 😉

    OriginalL'auteur Yoshi

  2. 1

    Ensemble de tous les éléments pour avoir box-sizing comme border-box dans votre feuille de style.

    Ce sera résumer le remplissage de tous les éléments de sorte que vous n'avez pas à vous soucier des perturbations si vous ajoutez tout le rembourrage.

    *{box-sizing: border-box;}

    OriginalL'auteur dusty

  3. 0

    Quelque chose comme ceci: http://jsfiddle.net/Rnf82/ ?

    voir le commentaire posté sur Dennis Traub la proposition de réponse.

    OriginalL'auteur giker

  4. -1

    Vous pouvez définir la marge extérieure de la div. Ensuite, l'intérieur de la div occupera seulement ce qui est à gauche.

    Ont un coup d'oeil à ceci: (essayez vous-même à jsFiddle)

    .outer {
 width: 200px;
 height: 200px;
 background-color: #DD0000;
 padding: 5px;
 box-sizing: border-box;
}
.inner {
 width: 100%;
 height: 100%;   
 background-color: #0000DD;
}

<div class="outer">
    <div class="inner"></div>
</div>

    vraiment ces deux manières de le faire est d'équivalent en ce qui concerne la question est concerné. Il est important de rappeler la redondance généré par la façon dont html et css normes sont la configuration.

    cela rendra le .outer 210px de large et de haut. La correction de ce problème en modifiant 200 190 est essentiellement la même que: ... et s'il vous plaît ne me dites pas de subtrach 2*5px de 200px ...

    OriginalL'auteur Dennis Traub