CSS Box Sizing Border Box HTML and CSS tutorial 55 | Zero to Hero full Course | HTML and CSS

Publié le: 16 octobre 2023
sur la chaîne: Academind learn

box-sizing: border-box; is a fundamental concept in CSS that affects how the dimensions of an element are calculated. It's used to control the box model behavior of an element.

In the default box model, when you set the width and height of an element, those values only apply to the content area of the element. Padding, borders, and margins are added to the specified width and height.

For example, if you have an element with a width of 200px, and you add 10px of padding and a 2px border, the total width of the element will be 224px (200px + 10px padding on the left + 10px padding on the right + 2px border on the left + 2px border on the right).

box-sizing: border-box; changes this behavior. When you apply box-sizing: border-box; to an element, the specified width and height include the padding and border. The padding and border are drawn inside the specified width and height, rather than adding to it.

So, in the example above, if you set box-sizing: border-box;, the total width of the element would remain 200px (200px content width + 10px padding on each side + 2px border on each side).

This can be very useful for creating layouts and designing elements because it makes it easier to work with percentages and avoids unexpected layout issues when adding padding or borders to elements.

Sur cette page du site, vous pouvez voir la vidéo en ligne CSS Box Sizing Border Box HTML and CSS tutorial 55 | Zero to Hero full Course | HTML and CSS durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Academind learn 16 octobre 2023, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 11 fois et il a aimé 2 téléspectateurs. Bon visionnage!

578