Closing the gap between my divs in normal flow
Question
I'd like to figure out how to get control of gaps between my divs. I had set up the jello layout and started to work on my navigation bar, when gaps got all messy. Tried to backtrack everything and got left with just my divs in a default flow layout and gaps. Here is the html code:
body { background-image: url("images/ozadjeCrno.jpg"); background-size: 100%; background-repeat: repeat-y; font-family: Georgia, "Times New Roman", Times, serif; font-size: small; } #container{ width: 900px; height: 600px; margin-left: auto; margin-right: auto; } #header{ width: 900px; height: 100px; background-color: rgba(207, 207, 207, 0.94); } #navigation{ width: 900px; height: 30px; background-color: rgba(207, 207, 207, 0.94); } #navigation ul li{ display: inline; } #logoLeft{ margin: 20px; width: 140px; height: 60px; } #logoRight{ margin: 20px; width: 110px; height: 60px; float: right; } #sidebar{ background-color: rgba(207, 207, 207, 0.94); width: 255px; height: 100px; } #main { background-color: rgba(207, 207, 207, 0.94); height: 100px; } #footer{ background-color: rgba(207, 207, 207, 0.94); } .shadow { -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px rgba(0,0,0,0.5); } .roundedCorners{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
<html> <head> <title>Solska Impro Liga</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="spletka.css"> </head> <body> <div id="container"> <div id="header" class="shadow roundedCorners"> <img id="logoRight" src="images/logo1.png" alt="logo1"> <img id="logoLeft" src="images/logo2.png" alt="logo1"> </div> <div id="navigation" class="shadow roundedCorners"> <ul id="navButtonsList"> <li><a href="" title="domov">DOMOV</a></li> <li><a href="" title="domov">ŠILARJI</a></li> <li><a href="" title="domov">O ŠILI</a></li> <li><a href="" title="domov">ARHIV</a></li> <li><a href="" title="domov">ENG</a></li> </ul> </div> <div id="sidebar" class="shadow roundedCorners"> <h1>SIDEBAR</h1> </div> <div id="main" class="shadow roundedCorners"> <h1>MAIN</h1> </div> <div id="footer" class="shadow roundedCorners"> <h1>FOOTER</h1> </div> </div> </body> </html>
I wanted to post a screenshot, but I can't since I need 10 reputation points :/
Thank you for your time, best regards.
2 answers
solution1
0 2014-12-03 20:56:32
Certain child elements have a default margin, which is causing your issues:
<ul id="navButtonsList"> is adding (for most browsers) 1em or 100% margin-top and -bottom . Same with all your <h1> 's.
You could do a "reset" at the top of your CSS, like:
ul, h1 { margin: 0; }
solution2
0 ACCPTED 2014-12-03 20:57:39
The reason you have gaps between divs is because of heading tags. Use overflow: hidden for your parent divs than heading margin won't go out of box and than add margin to your parent divs so you can control distance between them.
If you don't want to use overflow: hidden than you can change heading tag margin to padding. Than again you can control distance between parent divs with margin.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.