为什么我的图像底部有填充？
我使用这个CSS/HTML组合来模拟两列布局:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="two-cols">
<div class="left-col">
<img src="http://stott.customer.netspace.net.au/images/aurora2.jpg" alt="Image"/>
</div>
<div class="right-col">
Text
</div>
</div>
</body>
</html>
CSS
.two-cols {
border: 1px solid black;
display: table;
width: 100%;
}
.left-col, .right-col {
display: table-cell;
width: 50%;
}
img {
width: 300px;
height: 200px;
padding: 0;
margin: 0;
}
JSBin 在这里.
但是我的图像底部有一个不需要的填充:
任何想法为什么我得到那个,我怎么能摆脱它？
Gum*_*mbo 14
默认值vertical-align也baseline适用于img.使它bottom成功:
img {
vertical-align: bottom;
}