[css] margin-top on body tag

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mickey0
    New Member
    • Jan 2008
    • 142
    #1

    [css] margin-top on body tag

    Hi,
    I can't understand how manage the body tag. I wrote this below and to avoid a "white" space between the body tag and the top edge, I had to use margin:-top: -10px; Is it normal?
    Moreover, it seems that changing the margin-top of block1, it moves down the entire 'body'. So why can't set e.g. to '10' the margin of 'block1' ?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	  <title>1 - positioning</title>
	  <style type="text/css">
	html {background: white; }
	body {  
		background: gray; width: 400px; 
		margin: 0px; padding: 0px;  margin-top: -10px;
	
		height: 400px
	}

	#block1 { 
		background: pink; display: block; border: Dashed 2px; 
		width: 80px; height: 80px; margin: 20px;
	}

	#block2 { 
		background: yellow; display: block; border: Dashed 1px; 
		width: 80px; height: 80px; 
	}

	#block3 { background: green;  display: block; border: Dashed 1px; 
		width: 80px; height: 80px; 
	}

	#wrapper { 
		background: red;  position: relative; top: 50px; left: 50px;
		width: 300px;
		height: 300px;
	}

		
	  </style>	
	</head>

<body> 

	<div id="wrapper">
		<div id="block1">
			Block1
		</div>

		<div id="block2">
			Block2
		</div>

		<div id="block3">
			Block3
		</div>
	</div>


</body>
</html>
    ImageShack - Best place for all of your image hosting and image sharing needs
    http://imageshack.us/photo/my-images/210/cssr.jpg/
    Unlimited space to host images, easy to use image uploader, albums, photo hosting, sharing, dynamic image resizing on web and mobile.
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      This has to do with margin collapse between block level elements when they are stacked on top of each other. It prevents two elements, such as paragraphs, from getting double the margin when they are placed next to each other. If you add a border to the wrapper div, it unlinks the connection and the problem goes away.

      I profess to have never seen the issue between html and body before and can't think of the reasoning behind it right now.

        Comment

        • mickey0
          New Member
          • Jan 2008
          • 142
          #3
          Hello,
          if I set the border of the body, it works. Is it a good thing to set the border? I actually don't need it...however, I had few go and this seems working:
          Code:
          		html { background: yellow;  }
		body { 
	 		background: gray; 						
			margin:0; 									
			height: 100%; 
			position: absolute; top:0; left:0;
			width: 100%;
		}		
		

		#mainblock { background: purple; width: 200px; height: 200px; margin: 20px; }
          It seems that " position: absolute; top:0; left:0;" within 'body' is really needed....any opinion?

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              Haven't had a chance to think about this. I should know this but can't get my head wrapped around it. Maybe later.

                Comment

                • AutumnsDecay
                  New Member
                  • Mar 2008
                  • 170
                  #5
                  Giving the <html> tag any properties makes it act as an element, and elements have width / height properties.

                  What I don't understand is this: Why set the background color for your HTML tag, when your body tag is 100% width/height and a different color?

                  Delete " html { background: yellow; } " from your CSS and the space between your html and body on the page will disappear.

                    Comment

                    • Exequiel
                      Contributor
                      • Jul 2012
                      • 288
                      #6
                      Code:
                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
      <title>1 - positioning</title>
      <style type="text/css">
  body{ background:#FFF;}
    #container {  
        background: gray; width: 400px;  margin-top: -20px; margin-left:-20px;
        height: 400px
    }
 
    #block1 { 
        background: pink; display: block; border: Dashed 2px; 
        width: 80px; height: 80px; margin: 20px;
    }
 
    #block2 { 
        background: yellow; display: block; border: Dashed 1px; 
        width: 80px; height: 80px; 
    }
 
    #block3 { background: green;  display: block; border: Dashed 1px; 
        width: 80px; height: 80px; 
    }
 
    #wrapper { 
        background: red;  position: relative; top: 50px; left: 50px;
        width: 300px;
        height: 300px;
    }
 
 
      </style>    
    </head>
 
<body> 
<div id="container">
    <div id="wrapper">
        <div id="block1">
            Block1
        </div>
 
        <div id="block2">
            Block2
        </div>
 
        <div id="block3">
            Block3
        </div>
    </div>
</div><!--end of container--> 
 
</body>
</html>
                      You can try this one...

                        Comment

                        • Gansehchandra
                          New Member
                          • Jul 2012
                          • 2
                          #7
                          Code:
                          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
      <title>1 - positioning</title>
      <style type="text/css">
  body{ background:#FFF;}
    #container {
        background: gray; width: 400px;  margin-top: -60px;
        height: 400px
    }

    #block1 {
        background: pink; display: block; border: Dashed 2px;
        width: 80px; height: 80px; margin-left:-2px;
    }

    #block2 {
        background: yellow; display: block; border: Dashed 1px;
        width: 80px; height: 80px;
    }

    #block3 { background: green;  display: block; border: Dashed 1px;
        width: 80px; height: 80px;
    }

    #wrapper {
        background: red;  position: relative; top: 50px; left: 50px;
        width: 300px;
        height: 300px;
    }


      </style>
    </head>

<body>
<div id="container">
    <div id="wrapper">
        <div id="block1">
            Block1
        </div>

        <div id="block2">
            Block2
        </div>

        <div id="block3">
            Block3
        </div>
    </div>
</div><!--end of container-->

</body>
</html>
                          DO COPY AND PASTE, NEXT SAVE. RUN, PLEASE.
                          Last edited by Niheel; Jul 19 '12, 02:42 PM.

                            Comment

                            • Exequiel
                              Contributor
                              • Jul 2012
                              • 288
                              #8
                              Gansehchandra. . . You just copy paste my response....

                                Comment

                                Previous template Next
                                Working...