Placing border inside of div and not on its edge?

Question

I have a `

` element and I want to put a border on it. I know I can write `style="border: 1px solid black"`, but this adds 2px to either side of the div, which is not what I want. I would rather have this border be -1px from the edge of the div. The div itself is 100px x 100px, and if I add a border, then I have to do some mathematics to make the border appear.Is there any way that I can make the border appear, and ensure the box will still be 100px (including the border)?

Answer 1

I may not be understanding perfectly what you are trying to do, but I believe you want to employ CSS' box-sizing property.

Here is an example I cooked up...

So, lets say you had:

<img src="https://via.placeholder.com/100" />

You could style it with a border and keep it to 100 x 100 with:

img {

box-sizing: border-box;

width: 100px;

height: auto;

border: 1px solid black;

padding: 0;

margin: 0;

}

The key is box-sizing: border-box; that is *exactly* what the property was introduced for! Keep in mind, there will only be 98px of image because border does have dimension to it :) BTW, I threw in a couple of other style properties just for giggles, e.g., padding, margin, you don't necessarily have to include those. All the best!