2-9问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.p1{width: 360px;height: 40px; background: #000;color: #fff;}
</style>
</head>
<body>
<div class="picture1">
     <img src="images/03-01.jpg">
     <div class="p1">SCIENCE LAB</div>
    </div>
</body>
</html>

老师那个图片和文字之间有距离，怎么处理可以像2-9中的有求那样紧贴在一起啊，我之前是利用position定位来处理的，感觉有点麻烦，有没有其他方法啊

qq_修炼者_0 2017-08-23

源自：项目：网页布局案例 2-9 页面的底部

收起

3回答

小丸子爱吃菜 2017-08-23 17:38:28

font-size:0 可以让空白区域消失，清除display:inline-block元素换行符间隙；

你也可以给p1设置margin：0 auto；让文字区域网上挪~

收起回答

提问者 qq_修炼者_0 2017-08-23 15:53:32

老师为什么要给.picture1设置font-size:0;，这段代码什么意思啊？它不是设置字体的吗，为什么可以解决空格啊

收起回答

卡布琦诺 2017-08-23 11:04:53

给.picture1设置font-size:0;即：

.picture1{
font-size:0;
}

然后给.p1设置font-size:16px;即可。祝学习愉快！

收起回答

提问者 qq_修炼者_0 #1

老师为什么要给.picture1设置font-size:0;，这段代码什么意思啊？它不是设置字体的吗，为什么可以解决空格啊

2017-08-23 17:20:17
卡布琦诺回复提问者 qq_修炼者_0 #2

因为元素节点有文本节点，而font-size可以设置文本节点，简单说font-size:0px 表示不留缝隙。而当你给font-size设置大于0的数值时则表示设置字体大小。祝学习愉快！

2017-08-23 18:53:40