保证金 - 右边小于保证金 - 左边相等的值

我正试图围绕响应式网页设计环绕我的头。在这个过程中，我发现了一些奇怪的东西。采取以下设置：保证金 - 右边小于保证金 - 左边相等的值

<html> 
<head> 
    <title>Home</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" href="/res/css/300-px.css"></link> 
    <link rel="stylesheet" type="text/css" href="/res/css/600-px.css"></link> 
    <link rel="stylesheet" type="text/css" href="/res/css/desktop-px.css"></link> 
</head> 
<body> 
    <div id="container"> 

    </div> 
</body> 
</html>

而下面的CSS（来自三个样式表文件）：

@media (max-width:600px){ 
    #container { 
     width:95%; 
     margin-left:2.5%; 
     margin-right:2.5%; 
     border: 3px dashed black; 
     border-radius: 25px; 
     background-color:red; 
     height:300px; 
    } 
} 

@media (min-width:601px) and (max-width:900px){ 
    #container { 
     width:90%; 
     margin-left:5%; 
     margin-right:5%; 
     border: 3px dashed black; 
     border-radius: 25px; 
     background-color:green; 
     height:300px; 
    } 
} 

@media (min-width:901px){ 
    #container { 
     width:90%; 
     margin-left:5%; 
     margin-right:5%; 
     border: 3px dashed black; 
     border-radius: 25px; 
     background-color:blue; 
     height:300px; 
    } 
}

容器的宽度是90%，在任一侧的5%边距。在我的浏览器（包括Chrome和Firefox）中进行渲染时，右侧的边距看起来略小于剩余边距。

检查元素时显示的计算值，例如它们是完全相同的值。尽管如此，为什么页面上显示的实际边距缩小？

我已经创建了一个CodePen代码供您查看。

来源

2014-11-25 Matthijs

这是因为您添加了3px边框。在默认的盒子模型中，边框的宽度不是在盒子宽度中计算的，因此它在右边“溢出”。

要对此进行核实，您可以通过将box-sizing:border-box;添加到#container来更改默认盒子模型行为，以便在元素的宽度中计算边框宽度。

DEMO

来源

2014-11-25 14:41:51

太棒了！我不知道边界对此有何影响，谢谢！ – Matthijs 2014-11-25 14:46:24

保证金 - 右边小于保证金 - 左边相等的值

回答

相关问题