CSS inline-block margin bottom issue

Question

I got a problem with css inline-block, whenever i put inline-block for display property it's giving me some whitespace about 1px how to fix it ?

word-spacing 0px and letter-spacing 1px is not a solution for margin-bottom

my html files.

<!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>

and my css files.

* {
    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;
}

score -2 · Accepted Answer · edited May 23 '17 at 12:06

-2

you can use

display:table;

instead of

display: inline-block;

or you can use

float: left;

for .myTab ul and .myContent

and you can read https://css-tricks.com/fighting-the-space-between-inline-block-elements/ and display: inline-block extra margin

edited May 23 '17 at 12:06

Community

1
1

answered May 02 '15 at 17:22

Mohamed-Yousef

22,772
3
17
27

unfortunatly didn't work :/ – yedincifirat May 02 '15 at 17:26
@yedincifirat if you used display:table; instead of display: inline-block; it will work – Mohamed-Yousef May 02 '15 at 17:31
Mohamed it works! thanks for solution and where do i have to vote for comments ? – yedincifirat May 02 '15 at 17:43
glad to hear that . and try to check it in different browsers to check if it works well .. Good Luck @yedincifirat – Mohamed-Yousef May 02 '15 at 17:46

CSS inline-block margin bottom issue

1 Answers1