- img bottom blank problem
- Source: In the process of copying, a picture and a line of text above and below structure need to be distributed in a parent box, but there will always be a blank line under the img, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 238px;
height: 212px;
border: 1px solid #d9e0ee;
border-top: 3px solid #ff8500;
margin: 100px auto 0;
}
.box h2{
height: 35px;
line-height: 35px;
border-bottom: 1px solid #d9e0ee;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei","微软雅黑","SimHei","黑体";
}
.box h2 a{
color:#000;
text-decoration: none;
margin-left: 12px;
}
.box h2 a:hover{
color:#ff8500;
}
.box .banner{
width: 180px;
height: 108px;
background: pink;
margin: 7px auto 0;
}
.box .banner a{
display: block;
height: 108px;
background: yellow;
text-decoration: none;
}
.box .banner a .tit{
height: 21px;
line-height: 21px;
background: #000;
font-size: 14px;
text-align: center;
color:#fff;
}
.box .banner a:hover .tit{
color:#ff8500 ;
}
.box .banner a:hover span{
color:yellow;
}
.box .list {
margin-top: 10px;
}
.box .list li{
font-size: 12px;
/* border: 1px solid red; */
line-height: 24px;
height: 24px;
background: url(./img/dian.jpg) no-repeat 9px center;
padding-left: 18px;
}
.box .list li a{
color:#666;
text-decoration: none;
}
.box .list li a:hover{
color:#ff8500;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h2>
<a href="##">图片博客</a>
</h2>
<div class="banner">
<a href="##">
<img src="img/banner.jpg" >
<div class="tit">走进中世纪古城</div>
</a>
</div>
<ul class="list">
<li>
<a href="##">极简主义“一人食” 黄瓜虾仁三明治</a>
</li>
<li>
<a href="##">不用和面轻松做出的小甜点</a>
</li>
</ul>
</div>
</body>
</html>
The problem picture is as follows:
2. Analysis: Since img is an inline block element, it will be aligned with the baseline of the text. At this time, the bottom of the parent box will be left blank (the distance of the blank will change with the font size). The animation is as follows:
So to solve this problem, only need to convert img to block. Add the following code in css,
img{
display: block;
}
The final effect is as follows
If there is an error, please feel free to correct it; if you have any questions, please leave a message for discussion.