Question

我是一个相当新手的网络开发人员，我有一个非常基本的问题，我真的很感激一些帮助：

无论我在某个包含div中设置任何元素的宽度，safari和Chrome都会添加额外的边距来填充div的宽度。如果我指定它们有0个边距，则会覆盖css。例如，我有以下

<div class="container">
    <div class="element1">
    ...
    </div>
</div>

我把它设为css：

.container{
    background-color:#ffffff;
    margin-left:7.5%;
    margin-right:7.5%;
    padding:30px;
    color:#505050;
    line-height:1.5;
    font-size:14px;
}

.element1{
    max-width:50%;
    margin: 0px 0px 0px 0px;
}

element1的宽度为包含元素的50％，但它在右侧有一个额外的边距，用于填充包含元素的其余宽度。为什么会发生这种情况，如何将此右边距设置为0？

谢谢！

Answer 1

尝试在样式表之前添加重置样式表以规范化所有浏览器。对于不同的元素，浏览器对默认填充和边距等有自己的想法。通过重置样式表，您可以使每个浏览器从相同的位置开始。

http://meyerweb.com/eric/tools/css/reset/

Answer 2

在我看来，你不理解块级元素的概念。

“默认情况下，块级元素的格式与内联元素不同。通常，块级元素在新行上开始，内联元素不在。有关空格，换行符和块格式的信息，请参阅关于文本的部分。“

http://www.w3.org/TR/html4/struct/global.html#h-7.5.3

html元素默认填充包含div的宽度的余量，不能覆盖

2 个答案: