保證金 - 右邊小於保證金 - 左邊相等的值

我正試圖圍繞響應式網頁設計環繞我的頭。在這個過程中，我發現了一些奇怪的東西。採取以下設置：保證金 - 右邊小於保證金 - 左邊相等的值

<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

保證金 - 右邊小於保證金 - 左邊相等的值

回答

相關問題