css3 remplissage, pourcentages et taille de boîte

Question

J'ai deux colonnes, l'une est 60% et l'autre 40%. Les deux doivent avoir 20px rembourrage sur eux. Quelle est la meilleure façon de calculer cela sans utiliser la propriété de taille de boîte? Est-ce que je le fais en% ou en ems?

La taille de boîte est-elle une bonne méthode à utiliser ici?

Answer 1

vous pouvez utiliser la fonction calc comme ceci:

width: calc(100% - 80px); 

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 2

Pour répondre à votre question initiale, à moins que vous doit avoir 20 pixels pour une raison quelconque, les pourcentages d'utilisation pour le rembourrage et les marges et soustrayez-le de la largeur. Je vais utiliser les ems pour les marges et les marges supérieures/inférieures parce que c'est ce que je fais IRL.

.myclass_1 { 
    width: 56%; 
    margin: 1em 1%; 
    padding: .5em 1%; 
    display: inline-block; 
} 
.myclass_2 { 
    width: 38%; 
    margin: 1em auto; 
    padding: .5em 1%; 
    display: inline-block; 
} 

Le problème que la boîte aux frontières a été développé pour résoudre est que les frontières ne prendront pas un pourcentage de leur largeur, ce qui rend impossible de placer des bordures de pixels parfait dans une mise en page fluide. C'est plus pratique pour le rembourrage, puisque vous n'avez pas à faire beaucoup de maths, mais au moins cela fonctionne; alors qu'avec les frontières, il n'y a pas de solution sauf pour approximer. Ce que je fais pour accommoder les largeurs de bordure, et ce que vous voudrez peut-être essayer comme solution de repli pour les navigateurs plus anciens, est de définir une largeur minimale sur la boîte contenant, puis rogner un demi pour cent de la largeur pour permettre largeur de la bordure. Ensuite, jouez juste avec dans votre écran, jusqu'à ce qu'il remplisse la fenêtre de taille minimale sans casser le design. Inutile de dire que cela fonctionnera également si votre rembourrage doit être 20px mais vous voulez un affichage fluide, comme une dégradation gracieuse pour les navigateurs qui ne prennent pas en charge le dimensionnement des boîtes plus récentes. Par ailleurs, si vous n'avez pas de bordures, il existe un style "box-sizing: padding-box", même si je ne suis pas sûr qu'il ait un avantage par rapport à la bordure. Je suis avec vous sur calc() - c'est encore trop bogué, même s'il est supporté.