为什么图片和边框直接有空隙?

为什么图片和边框直接有空隙?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
display:inline-block;
width:auto;
height:auto;
border: 0.5px grey dotted;
overflow: hidden;
}
.content{
border: 1px grey solid;
margin: 10px;
float: left;
}
.special{
clear: both;
}
</style>
</head>
<body>
<div class="main">
<div class="content special">
<table>
<tr><td>
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
</td></tr>
<tr><td>
欢迎来到慕课网学习新知识!
</td></tr>
</table>
</div>
<div class="content">
<table>
<tr><td>
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
</td></tr>
<tr><td>
欢迎来到慕课网学习新知识!
</td></tr>
</table>
</div>
<div class="content">
<table>
<tr><td>
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
</td></tr>
<tr><td>
欢迎来到慕课网学习新知识!
</td></tr>
</table>
</div>
<div class="content special">
<table>
<tr><td>
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
</td></tr>
<tr><td>
欢迎来到慕课网学习新知识!
</td></tr>
</table>
</div>
<div class="content">
<table>
<tr><td>
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
</td></tr>
<tr><td>
欢迎来到慕课网学习新知识!
</td></tr>
</table>
</div>
<div class="content">
<table>
<tr><td>
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
</td></tr>
<tr><td>
欢迎来到慕课网学习新知识!
</td></tr>
</table>
</div>
</div>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
qq_紫藤追寻_0 2018-06-03 21:45:24

应该是table标签的原因,你换成直接在div 盒子里添加图片文字,就没有那个空隙了

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师