CSS inline-block margin 底部问题

Question

我在使用 css 内联块时遇到问题，每当我将内联块用于显示时属性它会给我一些大约 1px 的空白空间如何解决？

word-spacing 0px 和 letter-spacing 1px 不是 margin-bottom 的解决方案

我的 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;
}

Answer 1

你可以使用

display:table;

而不是

display: inline-block;

或者您可以使用

float: left;

对于 .myTab ul 和 .myContent

你可以阅读 https://css-tricks.com/fighting-the-space-between-inline-block-elements/ 和 display: inline-block extra margin

CSS inline-block margin 底部问题

CSS inline-block margin bottom issue

css

margin