How can I resolve the issue with inline-block in CSS causing a 1px whitespace? Changing word-spacing or letter-spacing does not solve the margin-bottom problem.
Here are snippets from 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>
This is a snippet of my CSS file:
* {
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;
}