Lorsque nous travaillons avec HTML feuilles de style CSS Il y a des moments qui la comportement les éléments de la page que nous concevons est loin de ce que vous pensez, ce serait la bonne chose. Dans ces cas, Nous avons qui nous plongent Internet pour vous renseigner et vous renseigner sur eux jusqu'à ce que le possible solution qui peut résoudre notre problème.
Dans ce cas, Nous allons parler de la comportement qui ont le Éléments HTML Quand assignez-lui une rembourrage. Supposons que vous ayez un élément div avec un largeur et la hauteur par défaut, être déjà en pixels ou en pourcentage, qui ont donné un avantage pour mieux afficher ses dimensions:
Comme vous pouvez le voir dans la CSS de l’onglet, Ce conteneur a une Largeur d'un 75% et l’autre hauteur de 100 pixels.
Maintenant, Nous affecterons une rembourrage de 20 pixels de chaque côté:
Nous pouvons voir que, maintenant, le conteneur présente une rembourrage rendre le texte pour séparer les bords, mais en outre, le format du contenant a augmenté, c'est-à-dire, maintenant a une hauteur et une largeur de 40 plus de pixels raison de la rembourrage assignés à chacune de ses faces.
Pour éviter ce problème, Nous allons utiliser la propriété box-sizing conteneur, Faites donc le taille de la même inclure aussi votre rembourrage. Pour ce faire, Nous avons simplement assigner la valeur box-sizing: frontière-boîte dans le CSS, et nous obtenons le résultat suivant:
De cette façon, le conteneur gardera le rembourrage assignés, de 20 pixels, sans pour autant augmenter leur Dimensions préalablement définis.
Ce que nous venons de le voir, se produit également avec les éléments entrée Formes, Que signifie que, faire correspondre à la conception désirée, Nous devrions avoir un peu de Skill.
Nous allons Ajouter un élément entrée de tapez le texte à la code Nous avons déjà, et nous allons configurer le entrée avec un Largeur de la 100% dans le conteneur parent, et un rembourrage de 5 pixels pour les côtés supérieures et inférieures, et 10 pixels droite et gauche.
Ce qui se passe? Que notre nouvelle élément entrée hors des dimensions dans le conteneur parent, même après avoir mis une largeur d’un 100%. Comment résoudre ce problème? Comme un de la même façon que nous avons fait avec son conteneur, Nous allons Assign propriété box-sizing avec la valeur frontière-boîte:
Voila! Ici, nous voyons que à l’aide le propriété box-sizing et en lui assignant le valeur frontière-boîte, Nous pouvons le faire la Éléments HTML notre site est s’adapte parfaitement, dans taille, les valeurs que nous avons attribué, en évitant que ces se développer Quand Assign une sorte de rembourrage leur.
