html - 将边框放在div内部而不是边缘(Placing border inside of div and not on its edge)

Question

I have a <div> element and I want to put a border on it.

(我有一个<div>元素，我想在它上面加一个边框。)

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.

(我知道我可以写style="border: 1px solid black" ，但这会增加2px到div的任何一侧，这不是我想要的。)

I would rather have this border be -1px from the edge of the div.

(我宁愿让这个边界距离div的边缘是-1px。)

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.

(div本身是100px x 100px，如果我添加一个边框，那么我必须做一些数学来使边框出现。)

Is there any way that I can make the border appear, and ensure the box will still be 100px (including the border)?

(有什么方法可以让边框出现，并确保框仍然是100px（包括边框）？)

  ask by TheMonkeyMan translate from so

Answer 1

Set box-sizing property to border-box :

(将box-sizing属性设置为border-box ：)

 div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100px; height: 100px; border: 20px solid #f00; background: #00f; margin: 10px; } div + div { border: 10px solid red; } 

 <div>Hello!</div> <div>Hello!</div> 

It works on IE8 & above .

(它适用于IE8及以上版本 。)