CSS页边距不响应页边空白，但适用于其他页边距属性

debugcn 发表于 Dev

用户名

的CSS

.title{
    margin-top: 200px; // does not work!
    margin-left: 20px;
    font-weight: bold;
    color: $green;
    font-size: 2.5em;
}

.title:hover{
    background-color: transparent;
}

.title:visited{
    color: $green;
}

rails / html.erb

<body>
    .....

    <%if current_page?(login_path) or request.path == "/signup"%>
        <%= link_to "TITLE", "#", class: "title"%>
        <%= yield %>
    <% else %>
    .....
</body>

我的标题CSS可以正常工作，但现在却没有。没关系，无论如何我的标题始终停留在屏幕顶部。我尝试过边距顶部和填充顶部，但它拒绝向下移动。但是，左边距有效，因此我不确定为什么保证金的一个方面起作用，而另一方面却不起作用。

我在这里做错了什么？并且，如果您认为问题不在上面的代码中，而是在CSS的其他地方列出，请告诉我，以便我可以调查CSS可能存在问题的其他部分！

以防万一，下面是定义基本布局的部分

/* BASIC CONFIGURATION */
body {
    color: #797979;
    background: $background;
    font-family: 'Lato', sans-serif;
    padding: 0px !important;
    margin: 0px !important;
    font-size:13px;
}

table{
    border-collapse: separate;
    border-spacing: 10px 5px;
}

td{
    margin-right: 10px;
}

#main-content{
    font-family: 'Lato', sans-serif;
}

ul li {
    list-style: none;
}

a, a:hover, a:focus {
    text-decoration: none;
    outline: none;
}

a:hover{
    background-color: inherit;
}
::selection {

    background: #68dff0;
    color: #fff;
}
::-moz-selection {
    background: #68dff0;
    color: #fff;
}

#container {
    width: 100%;
    height: 100%;
}

马克伯纳德

您的问题就在这里：

body {
    color: #797979;
    background: $background;
    font-family: 'Lato', sans-serif;
    padding: 0px !important;
    margin: 0px !important;
    font-size:13px;
}

您已标记为要使所有边距和填充都为0，并使其成为！important。如果要覆盖它，则必须使.title元素对于边距很重要。

我建议尽可能避免！important。通常，除非您覆盖提供的CSS，该CSS用！important定义了某些字段，否则通常不需要它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。