Question

感谢大家，我是意大利人，对不起我的英语，我想澄清一下：

为什么并非所有浏览器都看到margin-right，而开发人员工具有margin-right？（除了margin-bottom）之外，Firefox不会显示margin-right。

CSS

html
{
background-color:gold;
width: 100%;
height: 100%;
padding: 6px;
border: solid black 10px;
margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 20px;
}

在包装盒型号中，我有margin-right，在浏览器中不予考虑。

Chrome浏览器和开发者工具框模型：

Answer 1

您的信箱是over-constrained

CSS 2.2说：

＆＃39;利润率左＆＃39; +＆＃39; border-left-width＆＃39; +＆＃39; padding-left＆＃39; +＆＃39;宽度＆＃39; +＆＃39; padding-right＆＃39; +＆＃39; border-right-width＆＃39; +＆＃39; margin-right＆＃39; =包含块的宽度

如果以上所有都具有＆＃39; auto＆＃39;以外的计算值，则   据说价值过度约束＆＃34;和其中一个使用的值   必须与其计算值不同。如果＆＃39;方向＆＃39;   包含块的属性具有值＆＃39; ltr＆＃39;，指定的   ＆＃39; margin-right＆＃39;的价值被忽略，值计算如此   使平等成真。如果＆＃39;方向的价值＆＃39;是的，这是＃rtl＆＃39;   恰好是边缘左边的＆＃39;代替。

由此可以看出，浏览器会自动调整右边距，覆盖您提供的设置。

Answer 2

你应该从你的CSS中取下宽度。由于您使用的是保证金，因此您已经告诉浏览器只显示您允许的空间。它不会影响高度因为高度几乎是无限的。

所以你应该有这样的东西

html
{
background-color:gold;
height: 100%;
padding: 6px;
border: solid black 10px;
margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 20px;
}

Answer 3

浏览器并不总是始终处理html元素上的所有css属性，因为它没有父级。如果我理解你想要什么，如果你想避免使用包装div，我建议你这样做，但它可能有点不稳定：

* {
    box-sizing: border-box
}

html {
    background-color:gold;
    width: 100%;
    height: 100%;
    padding: 10px 50px 10px 20px;
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    padding: 6px;
    border: solid black 10px;
    margin: 0;
}

请参阅此working example

或者你可以使用包装器div并避免对HTML标签做任何事情而不是规范它（这是我建议的）：

<html>
<body>
    <div class="main">
        <!-- All your content -->
    </div>
</body>
</html>

* {
    box-sizing: border-box
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body{
    background-color:gold;
    padding: 10px 50px 10px 20px;
}

div.main {
    width: 100%;
    height: 100%;
    padding: 6px;
    border: solid black 10px;
    margin: 0;
}

作为shown here

保证金权利浏览器

3 个答案: