Question

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用于工作但现在却没有。我的标题总是坚持在屏幕的顶部，无论如何。我已经尝试过 margin-top 和 padding-top，但它拒绝向下移动。然而， Margin-left 确实有效，所以我不太清楚为什么保证金的一个方面有效但另一方面没有。

我在这里做错了什么？如果您认为问题未在上面的代码中列出，而是在我的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%;
}

Answer 1

你的问题就在这里：

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

您已经标记过您希望所有边距和填充都为0并使它们变得重要！如果要覆盖，则必须使.title元素对边距很重要。

我建议尽可能避免重要！通常你不需要它，除非你覆盖了一个定义了一些带有！important的字段的CSS。

Answer 2

您使用padding-top的百分比。使用像素值，它将起作用。这种情况下的百分比仅在您具有固定高度时才有效

CSS边际不响应margin-top，但适用于其他边距属性

2 个答案: