html - Div 留下很少的空格并且没有填充宽度 100%

Question

我想要一条充满整个屏幕中间的灰色直线。我有点喜欢<hr>但我不想用<hr>。但是，当我尝试使用它时，我的 div 右侧总是有一些我无法摆脱的空白区域。

这是我的 HTML 代码：

<div id = "rule">

</div>

这是我的CSS：

@charset "utf-8";
/* CSS Document */
*{
    padding-left:0;
    padding-right:0;
    margin-left:0;
    mergin-right:0;
}

#rule{
    background-color:#fff;

    margin-left:auto;
    margin-right:auto;

    height:40px;
    width:100%; 
    webkit-box-shadow: inset 2px 3px 10px 3px rgba(0, 0, 0, 0.5);

    box-shadow: inset 2px 3px 10px 3px rgba(0, 0, 0, 0.5);
}

Answer 1

好吧，我通常在所有 CSS 文件的开头所做的就是通过将所有内容设置为 0 来消除所有默认边距、填充和边框。

然后，您可以准确地知道您站在哪里，并可以在以后根据您的需要添加填充、边距和边框。

将所有内容设置为零，如下所示：

*{margin: 0;padding: 0px;border:0;}

Answer 2

我认为这是因为您的代码中有错字。在*选择器中， mergin-right:0应该是margin-right:0.

* {
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
}

请参阅此 JS Fiddle 示例。