Question

我已将所有方面的特定div的margin设置为0px，但当我在Chrome中检查时，它仍显示边距。我不知道为什么会这样：

正如您所看到的，CSS中有margin: 0px，Chrome右下方显示该元素没有边距。但是，当我将鼠标悬停在div上时，右侧有一个大的橙色区域，表示边距。

这是我的HTML：

        <div id="content">
            <div id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="black_mirror.html">Black Mirror</a></li>
                    <li><a href="hoc.html">House of Cards</a></li>
                    <li><a href="inception.html">Inception</a></li>
                    <li><a href="interstellar.html">Interstellar</a></li>
                    <li><a href="st.html">Stranger Things</a></li>
                </ul>
            </div>

            <div class="home-page-images">
                <img src="images/black_mirror_cover.jpg" class="home-page-image home-page-image-left" />
                <img src="images/hoc_cover.jpg" class="home-page-image home-page-image-right" />
                <div class="clear-float" />
                <img src="images/inception_cover.jpg" class="home-page-image home-page-image-left" />
                <img src="images/interstellar_cover.jpg" class="home-page-image home-page-image-center" />
                <img src="images/st_cover.jpg" class="home-page-image home-page-image-right" />
            </div>

            <div class="clear-float" />
        </div>

以下是我的一些CSS：

div.clear-float {
    clear: both;
}

div.home-page-images {
    margin: 0px;
    width: 600px;
}

div#container {
    /* TODO: Vertically center */
    background-color: #aaaaaa;
    color: white;    
    width: 960px;
}

div#nav {
    font-family: 'Playfair Display', serif;
    float: left;
    text-transform: uppercase;
}

div#nav a:hover, div#nav a:active {
    /* color: #FDF9BD; */
}

div#nav a:link, div#nav a:visited {
    /*
    display: block;
    margin: 20px;
    color: #FFFFFF;
    text-decoration: none;
    */
    color: white;
    text-decoration: none;
}

div#nav li {
    margin: 0px 0px 20px 0px;
}

div#nav ul {
    list-style-type: none;
    overflow: hidden;
}

我做错了什么？

Answer 1

DIV是块级元素：它们将“占用”父级提供给它们的所有水平空间。这意味着，即使您手动将div的宽度设置为小于父级的宽度，它仍将占用所有水平空间。如果您向div添加display: inline-block，您的“保证金”将会消失。

当然，这可能会影响您的布局的其余部分，但这完全是另一个问题。

Answer 2

每边的保证金为0！

空白空间不是margin。它只是一个空格显示，因为你给块元素赋予了600px的固定宽度。

您正在寻找 box-model 布局显示＆＃34; - ＆＃34;表示0或未设置。你有固定的元素宽度尝试使其100％宽度或删除宽度它不会显示空间右侧。

或者检查 computed tab ，您会看到边距的所有属性。

CSS：0px保证金不起作用

2 个答案: