CODEWITHSUNDEEP
htmlcss
Ryan
Ryan

Reputation: 6045

Why does setting the margin or padding with this HTML/CSS not behave as expected?

I'm trying to fine tune some spacing on my page using margin and padding and they either won't work at all or they come out way more than expected. I have a simple page with a "word wrapping" unordered list at the top for the navigation and below that some simple textual content.

Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>my title</title>
        <meta name="description" content=""/>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="styles.css"/>
    </head>
    <body>
        <div class="navigation">
            <ul>
                <li><a href="#">link_one</a></li>
                <li><a href="#">link_two</a></li>
                <li><a href="#">three</a></li>
                <li><a href="#">link four</a></li>
                <li><a href="#">fivefive</a></li>
                <li><a href="#">link six</a></li>
                <li><a href="#">seven</a></li>
                <li><a href="#">eight</a></li>
                <li><a href="#">ninenine</a></li>
                <li><a href="#">ten</a></li>
                <li><a href="#">eleven</a></li>
                <li><a href="#">12121212</a></li>
            </ul>
        </div>
        <div class="view">
            <p>sentences here with no markup.</p>
        </div>
    </body>
</html>

And here is the CSS:

body {
    margin:10px;
}

.navigation {
    width:100%;
    float:none;
}

.navigation ul {
    padding:0;
    margin:0;
    list-style-type:none;
    text-align:left;
}

.navigation ul li {
    float:left;
    margin:0 14px 12px 0;
}

.view {
    clear:left;
}

.view p {
    width:100%;
}

Here's a screenshot of what it looks like:

ui screenshot

The main thing I want to do is add some additional vertical spacing between the navigation and the textual content. Now as you can see there is already some nice spacing there because of the bottom margin on the li. But I don't want to use the li to add more spacing because I want it to be greater than the li bottom margin. So...if I set the bottom margin or the bottom padding on the .navigation nothing changes at all. why? If I set the top margin on the .view nothing changes at all. why? If I set the top padding on the .view to 1px it creates an additional 17px of space. why would it do that? So how can I accurately add some additional vertical spacing between the navigation and the view?

The other thing I want to do is set the right margin and padding on the .navigation. But when I set these nothing happens - they just remain zero. why is that?

Upvotes: 1

Views: 2628

Answers (4)

kingjeffrey
kingjeffrey

Reputation: 15260

When you float the li elements, the parent container height collapses to 0.

The next element that clears the 0 height parent container will automatically add a top margin to properly accomodate for the collapsed height of the previous parent containers.

If you then define a lesser top margin than that which was automatically applied, the browser rendering engine will still apply the larger margin. If you apply a larger margin than the automatically applied margin, your value will be applied.

This is strange, but correct behavior according to the CSS specifications.

To resolve this issue, you can either:

  • define a specific height for the parent object so it does not collapse to a height of 0, or
  • add a clearfix to the parent item to prevent it from collapsing.

Upvotes: 1

Kishore Kumar
Kishore Kumar

Reputation: 12874

You need to change the padding and margin properties of your <a>s

CSS:

.navigation ul li a {
    margin: 10px;
    padding: 5px;
}

Upvotes: 0

user100943
user100943

Reputation:

Your .navigation UL has a height of 0 because all list items are floated. Floated children do not contribute to the height of their parents unless they are contained. If you put large bottom margins on the bottom of .navigation you should begin to see some movement, but that's not the best way to do it. You should contain the floats in your UL, possibly by using the strategy described here:

List doesn't contain its floated list items

As to why adding 1px of padding to .view results in much more spacing than that, right now the p tag margins are overlapping the .view box and the li bottom margins. When you add padding to .view, that puts something in between the li margins and the p margins, preventing them from running together.

If you add a background colors to your .view and .navigation divs temporarily it will be more apparent what is going on.

Upvotes: 2

julia
julia

Reputation: 1

Your navigation div doesn't have a height to give a margin to push down the next box- nor does your view box. give both a height to move against.

Upvotes: 0

Related Questions