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

Veröffentlicht am: 16 Oktober 2023
auf dem Kanal: 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.

Auf dieser Seite können Sie das Online-Video CSS Box Sizing Border Box HTML and CSS tutorial 55 | Zero to Hero full Course | HTML and CSS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Academind learn 16 Oktober 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 11 Mal angesehen und es wurde von 2 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

141