将边框放在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> Hello!< / div>< div> Hello!< / div>
它适用于 IE8&上面。
I have a
<div>
element and I want to put a border on it. I know I can writestyle="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 toborder-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屋!