Home >Web Front-end >HTML Tutorial >Ask a basic CSS question..._html/css_WEB-ITnose
Ask a basic CSS question..._html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:301164browse
<html> <head> <style> .container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; } .top{ background: #ccc; width: 900px; height: 150px; margin: auto; } .nav{ background: #aaa; width: 900px; height: 100px; margin: auto; } .main{ background: #bbb; width: 900px; height: 1000px; margin: auto; } .footer{ background: #ddd; width: 900px; height: 150px; margin: auto; } </style> </head> <body> <div class="container"> <div class="top"></div> <div class="nav"></div> <div class="main"></div> <div class="footer"></div> </div> </body></html> I found that styles like .top{ margin-top:100px } or .footer{ margin-bottom:100px } are ineffective.
And .nav{ margin:100px auto } and .main{ margin:100px auto } are effective...
So I would like to ask if margin is the spacing between elements of the same level?
I need to achieve top 100px away from the top of the container, and footer close to the bottom of the container. What should I do?
It doesn’t need to be calculated in advance...
Reply to the discussion (solution)
What about padding? I'm a newbie and here are my thoughts. The margins sometimes overlap, please see the W3C tutorial for instructions.
<html> <head> <style> .container{ background: #aabbcc; width: 1000px; height: 1500px; margin:0 auto; padding-top: 100px;padding-bottom: 100px} .top{ background: #ccc; width: 900px; height: 150px; margin:0 auto; } .nav{ background: #aaa; width: 900px; height: 100px; margin: 0 auto; } .main{ background: #bbb; width: 900px; height: 1000px; margin:0 auto; } .footer{ background: #ddd; width: 900px; height: 150px; margin:0 auto; } </style> </head> <body> <div class="container"> <div class="top"></div> <div class="nav"></div> <div class="main"></div> <div class="footer"></div> </div> </body></html> Can’t you just do this? container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; padding:100px 0;}
Just do this No.container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; padding:100px 0;}
This is fine if you don’t set the height.
But I hope that after setting the width and height of the container, the distance from the footer to the bottom of the container will be 100px;
I want to know if there is any good way besides pre-calculating the size?
Add overflow:hidden; block with defined height and width
Can't you just reduce the height by 100px?
.container{ background: #aabbcc; width: 1000px; height: 1400px; margin: auto; padding:100px 0;}
If you want the total height of .container to be 1500px, then .container The height can be set to 1300px, and the top and bottom of the padding can be set to 100px each. The top and bottom have a total height of 200px, 1300px 200px=1500px, is this what you want?
There is no need to set the height of the container. It is ok if the elements inside it are automatically filled and stretched. If the top is 100px, add padding-top:100px; it is ok. If the internal elements are floating, add overflow. :hidden;