Html 右边距小于左边距且值相等_Html_Css_Responsive Design_Media Queries

Html 右边距小于左边距且值相等

html css responsive-design

Html 右边距小于左边距且值相等,html,css,responsive-design,media-queries,Html,Css,Responsive Design,Media Queries,我正试图将我的头脑集中在响应性的网页设计上。在这个过程中，我遇到了一些看起来很奇怪的东西。采取以下设置： <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="/r

我正试图将我的头脑集中在响应性的网页设计上。在这个过程中，我遇到了一些看起来很奇怪的东西。采取以下设置：

<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>

容器的宽度为

90%

，两侧的边距为

5%

。在我的浏览器（Chrome和Firefox）中渲染时，右边的边距似乎略小于左边的边距

检查元素时显示的计算值表示它们完全相同。尽管如此，为什么页面上显示的实际页边空白更小

我已经用代码创建了一个供您查看的窗口。

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

要纠正这一点，可以通过添加

box size:border-box

到

#容器

，因此边框宽度在元素的宽度中计算

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

要纠正这一点，可以通过添加

box size:border-box

到

#容器

，因此边框宽度在元素的宽度中计算

@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;
    }
}