Taille de la boîte CSS3: margin-box; Pourquoi pas?

Question

Pourquoi n'avons-nous pas box-sizing: margin-box;? Habituellement, lorsque nous mettons box-sizing: border-box; dans nos feuilles de style-nous vraiment dire l'ancien.

Exemple:

Disons que j'ai 2 colonnes de mise en page. Les deux colonnes ont une largeur de 50%, mais ils ont l'air moche car il n'y a pas de gouttière (écart à la moyenne); voici le CSS:

.col2 {
    width: 50%;
    float: left;
}

Pour appliquer une gouttière, vous pourriez penser que nous pourrions nous contenter de définir une marge de droite sur le premier des 2 colonnes; quelque chose comme ceci:

.col2:first-child {
    margin-right: 24px;
}

Mais ce serait la deuxième colonne wrap sur une nouvelle ligne, parce que l'un des cas suivants:

50% + 50% + 24px > 100%

box-sizing: margin-box; permettrait de résoudre ce problème en incluant la marge dans le calcul de la largeur de l'élément. Je trouverais cela très utile si ce n'est plus utile que l' box-sizing: border-box;.

Answer 1

Ne pourriez-vous pas utiliser width: calc(50% - 24px); pour vos colonnes? Ensuite, définissez vos marges.

Answer 2

Je pense que nous pourrions avoir un box-sizing: margin-box. Le modèle de boîte css montre exactement, quelles sont les positions de la marges de de la cadres de.

Il y a des petits problèmes - par exemple, la marge zones peuvent se chevaucher, mais ils ne sont pas difficiles à résoudre.

Je pense que la situation est la même, comme nous pouvons le voir avec l' overflow-x & overflow-y combinaisons, avec l'absolut positionied divs dans le tableau des cellules, avec la combinaison de min|max-largeur|hauteur avec la box-sizing, et ainsi de suite.

Il y a des fonctionnalités, vraiment simple de fonctionnalités, les développeurs de navigateurs ne veut tout simplement pas se développer.

À mon humble avis, box-sizing: margin-box ont une fonction très utile. Une autre fonctionnalité utile ont été l' box-sizing: padding-box, il existe au moins dans la norme, mais il n'a pas été implémentée dans tous les principaux navigateurs. Pas même dans le plus récent chrome!

Answer 3

Le gars en haut se pose au sujet de l'ajout de la marge à la largeur totale, y compris le remplissage et la bordure. La chose est, la marge est appliquée à l'extérieur de la boîte et de rembourrage et de la frontière ne sont pas, lors de l'utilisation d' border-box.

J'ai tenté d'atteindre l' border-margin idée. Ce que j'ai trouvé est que si l'utilisation de la marge, vous pouvez soit ajouter une classe d' .last pour le dernier élément (avec de la marge, puis appliquer une marge de zéro ou d'utiliser l' :last-child/:last-of-type). Ou ajouter de l'égalité des marges tout autour (similaire à la marge de la version ci-dessus).

Voir les exemples ici: http://codepen.io/mofeenster/pen/Anidc

Border-box calcule la largeur de l'élément + c'est de rembourrage + c'est la frontière que la largeur totale. Donc, si vous avez 2 x divs qui sont de 50%, ils seront adjacentes. Si vous ajouter le remplissage de ces divs de dire 8px, alors vous aurez une gouttière de 16px. Combinez cela avec un élément d'habillage - qui a aussi un rembourrage de 8px - vous aurez une bien aménagé grille avec l'égalité des gouttières dans tous les sens.

Voir cet exemple ici: http://codepen.io/mofeenster/pen/vGgje

Ce dernier est mon préféré de la méthode.

Answer 4

Je suis sûr que tout cela est évident, mais je vais le taper de toute façon parce que...eh bien, j'ai besoin de l'exercice. Serait le résultat suivant ne pas être tout aussi efficace que l' box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizing est utilisé pour contrôler à partir de laquelle le point de remplissage et de bordure sont évalués à la taille globale de l'élément. Ainsi, alors qu'il n'est pas casher pour inclure px marge % largeur (comme c'est généralement toujours le cas), il est plus facile de calculer le pourcentage montant doit être parce que vous n'avez pas à intégrer rembourrage et les frontières de la largeur définie.

Answer 5

C'est parce que la boîte de dimensionnement de l'attribut fait référence à la taille d'un élément après le calcul de la dimension donnée de valeurs spécifiques (rembourrage, frontières). "box-sizing: border-box" définit la hauteur/largeur d'un élément et prend en considération le rembourrage ainsi que la largeur de la bordure. Le champ d'application de l'un des éléments de la marge est plus grande que l'élément lui-même en ce sens qu'elle modifie le flux de la page et de ses éléments environnants, donc modifier directement la façon dont l'élément s'insère au sein de sa mère par rapport à son frère éléments. En fin de compte une "marge" de la boîte valeur de l'attribut serait la cause majeure des problèmes, et peut est essentiellement la même que la définition des éléments de la hauteur/largeur directement.