Home/ Questions/Q 6355185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T22:42:50+00:00

I have the following code and I am wondering why is that when I

  • 0

I have the following code and I am wondering why is that when I apply margin-top: 100px; to the logo id it affects the wrapper div tag in that it also inherits a margin-top of 100px however if I apply a padding-top it works the way I intend it to work.

CODE 

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <link rel="icon" type="image/png" href="" />
    <link rel="stylesheet" type="text/css" media="all" href="" />

    <style type="text/css" media="all">

        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
            font-size: 1em;
            font-style: normal;
            font-color: normal;
            color: #ffffff;
        }


        #wrapper {
            background-color: #018eb9;
            width: 100%;
            height: 300px;
        }

        #innerwrapper {
            width: 600px;
            margin: 0px auto;
        }

        #logo {
            padding-top: 100px;
        }

        #menu  li {
            display: inline;
        }

    </style>

    <title>Sample</title>
</head>

<body>
    <div id="wrapper">
        <div id="innerwrapper">
            <div id="logo">logo</div>
            <div id="menu">
                <ul>
                    <li>home</li>
                    <li>about</li>
                    <li>faq</li>
                </ul>
            </div>
        </div>
    </div>
</body>

EDIT

As requested the markup that is causing the issue is

#logo {
 padding-top: 100px;
}

So if I change padding-top to margin-top, you’ll notice the background color move down 100px

Further Editing

In light of the responses regarding vertical margin collapsing from everyone I found an excellent guide for beginners like myself at http://www.howtocreate.co.uk/tutorials/css/margincollapsing

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am wondering why is that when I apply margin-top: 100px; to the
    logo id it affects the wrapper div tag in that it also inherits a
    margin-top of 100px

    It sounds like you need to read up on collapsing margins.

    One possible quick fix is to set overflow: hidden on #innerwrapper.

    • 0