When using inline-block, baffling effects sometimes occur, such as:
- Between two inline-block elements if there is space, carriage return, tab, then there is a gap in the page
- The top two elements of different height inline-block can not be aligned, or inline-block using the following reason a few more pixels
Examples 1, voids
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>effect:
Solution
1. Remove the space
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div></div><div></div>
</body>
</html>2. Add the parent element, the parent element of font-size set to 0, and then disposed in the font-size inline-block element is 14px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
font-size:0;
}
.child{
font-size:14px;
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>3. Usemargin-right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.child{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
margin-right:-5px;
}
</style>
</head>
<body>
<div class="child"></div>
<div class="child"></div>
</body>
</html>4. Add the parent element, using the letter-spacing (increased or decreased the white attributes (character spacing between characters))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
letter-spacing:-5px;
}
.child{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>5. Use the word-spacing (increase or decrease the gap between the attribute word (i.e. word interval))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
word-spacing:-5px;
}
.child{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>Solve effects:
Example 2, provided after the inline-block, baffling some blank
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>span设为inline-block之后下面的空白</title>
<style>
div{
border:solid 1px rgb(202, 43, 43);
width:250px;
}
span{
display:inline-block;
width:200px;
height:200px;
background-color:rgb(109, 195, 252);
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>effect
Solution
Using vertical-align
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>span设为inline-block之后下面的空白</title>
<style>
div{
border:solid 1px rgb(202, 43, 43);
width:250px;
}
span{
display:inline-block;
width:200px;
height:200px;
background-color:rgb(109, 195, 252);
vertical-align:top;//新增
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>Solve effect
3 example, the top two elements of different height inline-block can not be aligned
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.child1{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(109, 195, 252);
}
.child2{
display: inline-block;
width:100px;
height: 120px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="child1"></div>
<div class="child2"></div>
</body>
</html>effect
Solution
Or the use of vertical-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.child1{
display: inline-block;
width:100px;
height: 100px;
vertical-align:top;//新增
background-color: rgb(109, 195, 252);
}
.child2{
display: inline-block;
width:100px;
height: 120px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="child1"></div>
<div class="child2"></div>
</body>
</html>