Menu
How can I apply a border to a div without occupying any extra space? The border must be inside the div.
450
Usually by default, 'border:' puts the border on the outside of the width, measurement, adding to the overall dimensions, unless you use the 'inset' value: div {border: inset solid 1px black}; But 'outline:' is an extra border outside of the border, and of course still adds extra width/length to the element.
We style individual sides of a border and round their edges. Borders take up space and affect the box-sizing.
This is a very simple thing to do. Just go to your stylesheet. css and type border: solid black 2px; in your div section.
If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.
You have 3 choices:
outline, e.g., outline:1px #000 solid;. Read more.box-sizing, which is a css3 property. E.g., box-sizing:border-box;. Read more.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
