I'm doing clone coding of Lotte World homepage in Korea.The homepage has a layout with the float elements. I gave the logo float property to the left. and I gave the .info class float property to the right. And naturally, the .gnb class becomes a central alignment. through text-align center. The problem is that there is an undefined margin on top of .gnb class. I did some experiments and deleted the logo and the problem was solved. I want to know exactly what caused the problem.
/*no reset css*/
header{
width: 100%;
height: 46px;
border-bottom: 1px solid #e1e1e1;
background: #f8f8f8;
}
#header::after{
content:"";
display: block;
clear: both;
}
#header{
position: relative;
width: 1173px;
margin: 0 auto;
}
#header .left li a{
display: inline-block;
height: 46px;
font-size: 13px;
color:#555;
}
#header .left li{
float: left;
position: relative;
padding: 0 20px;
line-height: 46px;
}
/* 첫 번째 자식 구분선 해제 */
#header .left li:first-child{
padding-left: 0;
}
#header .left li:first-child:after{
display: none;
}
/* 로고 구분선 */
#header .left li:after{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 20px;
background: #e1e1e1;
}
/* 왼쪽 로고 이미지 */
#header .left li:first-child a{
padding: 0 0 0 28px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_sky_icon.png') no-repeat 0 50%;
}
#header .left li:nth-child(2) a{
padding: 0 0 0 35px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_aqua_icon.png') no-repeat 0 50%;
}
#header .left li:last-child a{
padding: 0 0 0 33px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_water_icon.png') no-repeat 0 50%;
}
/* 오른쪽 */
.family,
.members,
.lang{
display: inline-block;
}
#header .right{
float: right;
}
#header .right li,
a{
float: left;
position: relative;
line-height: 46px;
}
#header .family > a:last-child{
padding-right: 30px;
}
#header .family a:hover{
color: #590fe4;
}
#header .members a:hover{
color: #000;
}
#header .members a,
#header .lang a{
font-weight: bold;
}
#header .family a,
#header .members a{
padding: 0 11px;
}
#header .family a,
#header .members a,
#header .lang a{
font-size: 13px;
color: #555;
}
#header .family li:first-child:after,
#header .members li:first-child:after{
display: none;
}
#header .family li:after,
#header .members li:after{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 20px;
background: #e1e1e1;
}
#header .lang a{
padding-right: 16px;
height: 46px;
background: url('img/lang_arrow.png') no-repeat right center;
}
/* 네비게이션 */
nav{
width: 100%;
height: 99px;
border-bottom: 1px solid #e1e1e1;
}
#nav{
width: 1173px;
height: 100px;
margin: 0 auto;
text-align: center;
}
/* 왼쪽 */
#nav h1{
float: left;
margin-top: 13px;
}
/* 중앙 */
#nav .gnb::before{
content:"";
display: block;
clear: both;
}
#nav .gnb{
float: left;
height: 99px;
margin-left: 176px;
}
#nav .gnb li:first-child{
padding-left: 0;
}
#nav .gnb li{
height: 99px;
padding-left: 48px;
float: left;
}
#nav .gnb li a{
display: block;
font-size: 17px;
line-height: 95px;
}
/* 오른쪽 */
#nav .info{
height: 78px;
margin-top: 21px;
float: right;
}
#nav .info .srch, .reser, .group{
position: relative;
padding-left: 32px;
float: left;
}
#nav .info .Btn span{
display: block;
}
#nav .info .Btn span:nth-child(2){
padding-top: 13px;
}
#nav .info .txt{
position: absolute;
left: 50%;
font-size: 16px;
color: #590fe4;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>롯데월드 어드벤처</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="default.css">
</head>
<body>
<header>
<div id="header">
<ul class="left">
<li><a href="#">SEOUL SKY</a></li>
<li><a href="#">롯데월드 아쿠아리움</a></li>
<li><a href="#">김해롯데워터파크</a></li>
</ul>
<ul class="right">
<div class="family">
<li><a href="#">민속박물관</a></li>
<li><a href="#">아이스링크</a></li>
</div>
<div class="members">
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">회원가입</a></li>
</ul>
</div>
<div class="lang">
<a href="#">KOR</a>
</div>
</ul>
</div>
</header>
<nav>
<div id="nav">
<h1>
<a href="#"><img src="img/logo.png" alt="롯데월드 어드벤처 로고"></a>
</h1>
<ul class="gnb">
<li><a href="#">즐길거리</a></li>
<li><a href="#">요금/우대혜택</a></li>
<li><a href="#">참여프로그램</a></li>
<li><a href="#">이용가이드</a></li>
<li><a href="#">소통서비스</a></li>
</ul>
<ul class="info">
<p class="srch Btn">
<span>
<img src="img/header_srch_btn.png" alt="검색하기">
</span>
<span class="txt">검색</span>
</p>
<p class="reser Btn">
<span>
<img src="img/reser_btn.png" alt="예매하기">
</span>
<span class="txt">예매</span>
</p>
<p class="group Btn">
<span><img src="img/group_btn.png" alt="단체예약"></span>
<span class="txt">단체</span>
</p>
</ul>
</div>
</nav>
</body>
</html>
