如何动态显示div上的边框而不更改其内部度量？

Question

在下面的示例中，我有两个div：

两者都有相同的内容和几乎相同的风格，除了第二个div还有一个样式：     边框：1px纯黑色;

问题是这个边框正在调整内部内容的大小，我不希望这样。我想在页面加载期间动态地在页面上的某些div上放置边框，但不要对内容中的任何度量或更改进行任何操作。

有办法做到这一点吗？我可以在必要时使用javascript，但只使用css的解决方案会更加苛刻。

Answer 1

而不是边框​​使用outline

div.border
{
    outline: 1px solid black;
}

DEMO

Answer 2

您还可以使用透明边框，例如：border：1px solid transparent; 然后应用您想要的任何其他颜色。

Answer 3

您可以使用透明边框，然后在应用边框颜色时，尺寸将保持不变。这是fiddle

<强> HTML          

<div>
</div>

css

div {
    border:2px solid transparent;
    width:200px;
    height:200px;
    background:#eeeeee;
    margin:10px;
}

<强> JS

$("#red").on('click',function() {
    $("div").css("border","2px solid red");
});

$("#transparent").on('click',function() {
    $("div").css("border","2px solid transparent");
});

Answer 4

您有2个选项。

• 使用css：1px solid transparent;和
• 使用css：box-sizing:border-box;