CODEWITHSUNDEEP
htmlcssstyles
Kaden Nelson
Kaden Nelson

Reputation: 45

Why isn't margin-top working correctly?

So I'm trying to get the red box with text inside of it to go down 100px, but it's not working out so well as you can see by this picture (https://gyazo.com/786598af68920c4900aac6ba6a5b3022) It seems as if it's taking the support_wrapper div too and moving that down 100px as well. I've looked everywhere and I'm sorry for asking a simple question that I couldn't seem to find the answer for but please, any help would be great :) 

<html>
    <head>
        <style>
            body {
                background-color: #252525;          
            }
            #support_wrapper {


                /* Setting the size of the wrapper */
                width: 1200px;
                height: 1600px;

                /* Backgrond image properties */
                background-image: url("Support.png");
                background-position: center;
                background-repeat: none;

                /* Center the div */
                margin: 0 auto;
                padding: 0 auto;

            }
            #form_wrapper {

                /* Debugging */
                border: 1px solid black;
                background-color: red;

                margin-top: 100px;
            }

        </style>
    </head>
    <body>
        <div id="support_wrapper">
            <div id="form_wrapper">
                <p>  text in the form box </p>
            </div>
        </div>

    </body>
</html>

Upvotes: 0

Views: 58

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105863

You are dealing with margin collapsing

to keep the childs margin inside the container, you may use a transparent border 

   border-top:1px solid transparent;


 body {
   background-color: #252525;
 }
 #support_wrapper {
   /* Setting the size of the wrapper */
   width: 1200px;
   height: 1600px;
   /* Backgrond image properties */
   background-image: url("Support.png");
   background-position: center;
   background-repeat: none;
   /* Center the div */
   margin: 0 auto;
   padding: 0 auto;
   background:yellow;/* show me */
   border-top:1px solid transparent;/* prevent collapsing margin */
 }
 #form_wrapper {
   /* Debugging */
   border: 1px solid black;
   background-color: red;
   margin-top: 100px;
 }
<div id="support_wrapper">
  <div id="form_wrapper">
    <p>text in the form box</p>
  </div>
</div>

Upvotes: 3

liam
liam

Reputation: 361

try padding-top, you can't margin inside of a div that already has a set size. (I am just guessing, I have had the same issue and just used padding)

Upvotes: 0

callmeniko
callmeniko

Reputation: 122

Try to add to #form_wrapper in the beginning this:

position: absolute;

Let me hear if this works :)

Upvotes: 1

Related Questions