Home/ Questions/Q 7669871
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T15:41:35+00:00

I’m trying to fine tune some spacing on my page using margin and padding

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0