0
내 div 사이의 간격을 제어하는 방법을 알아 내고 싶습니다. 나는 젤리 배치를 설정하고 틈새가 모든 지저분 해지면 내비게이션 바를 사용하기 시작했습니다. 모든 것을 되돌리려 고 시도했고 기본 흐름 레이아웃과 틈에서 내 div 만 남았습니다. 여기에 HTML 코드입니다 :정상적인 흐름 내 divs 사이의 틈새
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>내가 스크린 샷을 게시하고 싶었다,하지만 난 10 명성 포인트가 필요 없기 때문에 :
/가 , 시간 내 주셔서 감사를 친애하는.
<ul id="navButtonsList">
1em 또는
100%
margin-top 및
-bottom :
그러나 여전히 jsFiddle ...을 포함 할 수 있습니다. 여기에 [내가 한 것] (http://jsfiddle.net/pze811vL/) – philtune
CSS를 재설정하여 기본 여백, 채우기, 테두리 등을 제거해보십시오. 브라우저가 적용됩니다. 또는 예를 들어'h1, ul {margin : 0}'. – j08691
jsFiddle을 보여 주신 philtune에게 감사드립니다. 앞으로 사용하겠습니다. – kamenjan