将边框放在div的内部，而不是放在边缘 [英] Placing border inside of div and not on its edge

问题描述

我有一个< div> 元素，我想在其上放一个边框。我知道我可以写 style =border：1px solid black，但这会在div的两侧添加2px，这不是我想要的。

我宁愿这个边框距离div的边缘为-1px。 div本身是100px x 100px，如果我添加一个边框，那么我必须做一些数学使边框出现。

有什么办法，我可以

解决方案

设置 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;背景：＃00f; margin：10px;} div + div {border：10px solid red;}

 <$ < / div>  

p>

它适用于 IE8& 。

I have a <div> 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)?

解决方案

Set box-sizing property to 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.

这篇关于将边框放在div的内部，而不是放在边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！