新手css爬坑记——父元素少写了heigth引发的多4px

2018-9-22 小若 HTML CSS学习录

今天在做“简书”练习顶部导航css样式遇到这样的一个问题。


html:

<nav id="nav">

   <div class="nav-content">

    <!--导航文字-->  

    <div class="nav-content-l">

        <a href="#">

            <img src="images/js_logo.png" alt="">

        </a>

    </div>

    <!--导航列表-->  

    <div class="nav-content-c">

           <ul>

               <li><a href=""><img src="images/find_icon.png" alt="">发现</a></li>

               <li><a href=""><img src="images/book_icon.png" alt="">关注</a></li>

               <li><a href=""><img src="images/ld_icon.png" alt="">消息</a></li>

               <li class="search-input">

                   <input type="text" value="搜索">

                   <img class="search-icon" src="images/fd_icon.png" alt="">

               </li>

           </ul>

       </div>

    <!--导航头像-->  

    <div class="nav-content-r">

           <img class="jsa-btn" src="images/jsa_icon.png" alt="">

           <img class="head-btn" src="images/touxiang_img.png" alt="">

           <a href="#" class="write-btn">

               <img src="images/write_icon.png" alt=""> 写文章  </a>

     </div>

   </div>

</nav>

 


css:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td{

padding: 0; margin: 0;

} /*****************顶部导航*****************/

#nav{ height: 60px; width: 100%; position: fixed; top: 0; left: 0;

}

.nav-content{

width: 1350px; background-color: red; margin: 0 250px;


}

/*logo*/ .nav-content-l{ width: 200px; display: inline-block; float: left; background-color: #fff;

}

.nav-content-l img{ width: 110px; height: 56px;

} /*列表*/ .nav-content-c{ background-color: green; margin: 0; display: inline-block; height: 60px;

}

.nav-content-c ul{ height: 60px;

}

.nav-content-c ul li{ height: 60px; line-height: 60px; float: left; list-style: none;

}


问题如图:

H0)4$ERSACKR2QPHFN]6}`X.png




多出了4px。。。


解决:



.nav-content{ width: 1350px; height: 60px; background-color: red; margin: 0 250px; line-height: 60px;

}


高度不会继承,而.nav-content未设置高度,所以出现这个问题。




css中子标签都设置了60px,而此处的64px,也就是多出来的4px从何而来?


暂时猜想可能因为line-heigth导致的。。










 

标签: css爬坑记

发表评论:

Powered by emlog 备案号:豫ICP备18002778号