How do I combine css border & padding into the width and height?
-
To do this you can use the box-sizing CSS property.
The CSS code for content with borders and padding.
<style> .box1 { width: 500px; height: 50px; border: 2px solid brown; } .box2 { width: 500px; height: 50px; padding: 50px; border: 2px solid green; } </style>
The demo HTML.
... <div class="box1">I'm inside box1 get me out of here!</div> <br> <div class="box2">I'm inside box2 get me out of here!</div> ...
The result is different width and height sizes because of the padding.
To combine the padding and the border into the width and height we use
box-sizing: border-box
The CSS code is now:
<style> .box1 { width: 500px; height: 50px; border: 2px solid brown; box-sizing: border-box } .box2 { width: 500px; height: 50px; padding: 50px; border: 2px solid green; box-sizing: border-box } </style>
The result is:
© Lightnetics 2024