CSS内联块边缘底部问题

我在CSS内联块中遇到了问题，每当我将inline block放置以显示display属性时，它都会给我一些大约1px的空间如何修复它？

单词间隔0px和字母间隔1px不是余量的解决方案

我的html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="myTab">
        <ul>
            <li><a href="#">1.tab</a></li>
            <li><a href="#">2.tab</a></li>
            <li><a href="#">3.tab</a></li>
        </ul>
        <div class="myContent">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium suscipit alias temporibus officiis inventore cum placeat pariatur beatae sapiente, sed rerum iste corrupti maxime corporis atque omnis. Totam, necessitatibus, consectetur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas consequatur, id soluta dolorum delectus tempora quod atque, nemo, beatae culpa perferendis placeat earum! Recusandae eos, maxime ipsa, vero vitae molestias soluta iste corrupti expedita sit dicta numquam, nihil veritatis ea odit molestiae qui minima! Esse expedita ipsum dolore inventore ex!</p>
        </div>
        <div class="myContent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, soluta, pariatur! Ullam at non animi sapiente, quas temporibus, modi esse quae ut incidunt autem. Totam sint autem quibusdam obcaecati dolorum.</div>
        <div class="myContent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit autem, sunt accusantium ducimus error obcaecati iste. Sapiente, asperiores libero nostrum ratione dolore. Autem inventore, facere nobis molestiae impedit, debitis!</div>
    </div>
<!-- js files-->
<script src="jquery.js"></script>
<script src="main.js"></script>
<!--/ js files-->
</body>
</html>

和我的CSS文件。

* {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.myTab{
    width:700px;
    margin:100px auto;
}
.myTab ul {
    background: #15232d;
    height:40px;
    overflow:hidden;
    display:inline-block;
}
.myTab ul:after {
    content:"";
    display:table;
    clear:both;
}
.myTab ul li {
    float: left;
    margin: 0;
    padding: 0;
}
.myTab ul li a {
    display: block;
    text-decoration: none;
    color:#fff;
    font:bold 12px tahoma;
    padding:0 20px;
    line-height: 41px;
}
.myTab ul li a:hover{
    background: #2f4758;
}
.myContent{
    color:#fff;
    background: #193549;
    font:12px/22px sans-serif;
    color:#e6e6e6;
    padding:12px;
}
.myContent p {
    margin-bottom:10px;
}

您可以使用

display:table;

而不是

display: inline-block;

或者您可以使用

float: left;

用于.mytab ul和.mycontent

，您可以阅读https://css-tricks.com/fighting-the-pace-betwewen-inline-block-elements/和显示：内联块额外保证金

相关内容

最新更新

热门标签：