CODEWITHSUNDEEP
cssmargin
user3277633
user3277633

Reputation: 1923

CSS margin does not respond to margin-top but works for other margin properties

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>

My title CSS use to work but now it does not. Right my title is always stick to the top of the screen no matter what.I've tried margin-top and padding-top, but it refuses to move down. Margin-left, however, does work, so I am not quite sure why one aspect of margin works but the other does not.

What am I doing wrong here? And if you think the problem is not listed in the code above but rather elsewhere in my CSS, please let me know so I can maybe look into other parts of my css where the problem might be !

Just in case below is the portion where it defines the fundamental layout

/* 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%;
}

Upvotes: 0

Views: 191

Answers (2)

Yuriy.Bidasyuk
Yuriy.Bidasyuk

Reputation: 16

You use percentage for padding-top. Use pixel value and it will work. Percentage in this case will only work if you have fixed height

Upvotes: 0

markbernard
markbernard

Reputation: 1420

Your problem is right here:

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

You have marked that you want all margins and padding to be 0 and made them !important. If you want to override that you have to make your .title element to be important for margins.

I would recommend avoiding !important as much as possible. Typically you don't need it unless you are overriding a provided CSS that defines some fields with !important.

Upvotes: 2

Related Questions