关于block之间微小的间距问题

关于block之间微小的间距问题

已完成作业如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>CSS网页布局</title>
 <link rel="stylesheet" type="text/css" href="index.CSS">
</head>
<body>
 <!-- 头部 -->
 <div class="top">
 <div class="header">
 <div class="logo">
 <img src="images/logo.png" alt="logo">
     </div>
     <div class="nav">
      <ul>
      <li>Home</li>
      <li>About</li>
      <li>Gallery</li>
      <li>Faculty</li>
      <li>Events</li>
      <li>Contact</li>
      </ul>
     </div>
 </div>
 </div>

 <!-- 主体 -->
 <div class="main">
 <div class="banner">
 <div><img src="images/banner3.jpg"></div>
 <div class="screen"></div>
 <form>
 <input class="input1" type="text" placeholder="your Name"><br>
 <input class="input1" type="text" placeholder="your Phone" ><br>
 <input class="input1" type="Email" placeholder="your Email"><br>
 <textarea placeholder="Write Your Comment Here " maxlength=120></textarea><br>
 <input class="input2" type="submit" value="SEND MESSAGE">
 </form>
 <div class="clear"></div>
 </div>
 <div class="about">
 <div class="about-block1">
 <div class="tit-about">
 ABOUT
 </div>
 <label class="blueline"></label>
 <div class="textbl">
 Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry.Lorem Ipsum has been the industry's standard dummy <br>text ever since the 1500s.
 </div>
 </div>
 <div class="about-block2">
 <div id="awau">A WORD<br>ABOUT US</div>
 <div class="explore-box">
 <div class="explore-text">
 Praesent dignissim viverra est.sed<br>
 bibendum ligula congue non.SED ac nisl<br>
 et felis gravida commodo?Suspendisse<br>
 eget ullamcorper ipsum.Suspendisse<br>
 diam amet.
 </div>
 <div class="explore-button">EXPLORE</div>
 <div class="bottom-layer"></div>
 </div>
 <div class="rightdata">
 <div class="num">70000</div>
 <label class="blueline2"></label>
 Students
 </div>
 <div class="rightdata">
 <div class="num">600</div>
 <label class="blueline2"></label>
 Faculty
 </div>
 <div><img src="images/bb3.jpg"></div>
 <div class="clear"></div>
 </div>
 <div class="about-block3">
 <div><img src="images/b1.jpg"></div>
 <div class="explore-box-2">
 <div class="explore-text2">
 Library<br>
 <dl>
 <dt>Lorem Ipsum is simply dummy test of the printing and typesetting industry</dt>
 <dd>Lorem Ipsum has been the industry's standard dummy<br>
 text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type specimen book.
 </dd>
 </dl>
 </div>
 <div class="explore-button-2">EXPLORE</div>
 </div>
 <div><img src="images/b2.jpg"></div>
 <div class="explore-box-2">
 <div class="explore-text2">
 Computer lab<br>
 <dl>
 <dt>Lorem Ipsum is simply dummy test of the printing and typesetting industry</dt>
 <dd>Lorem Ipsum has been the industry's standard dummy<br>
 text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type specimen book.
 </dd>
 </dl>
 </div>
     <div class="explore-button-2">EXPLORE</div> 
     </div>
     <div class="explore-box-2">
 <div class="explore-text2">
 Conference Hall<br>
 <dl>
 <dt>Lorem Ipsum is simply dummy test of the printing and typesetting industry</dt>
 <dd>Lorem Ipsum has been the industry's standard dummy<br>
 text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type specimen book.
 </dd>
 </dl>
 </div>
     <div class="explore-button-2">EXPLORE</div> 
     </div>
     <div><img src="images/b3.jpg"></div>
     <div class="explore-box-2">
 <div class="explore-text2">
 Playground<br>
 <dl>
 <dt>Lorem Ipsum is simply dummy test of the printing and typesetting industry</dt>
 <dd>Lorem Ipsum has been the industry's standard dummy<br>
 text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type specimen book.
 </dd>
 </dl>
 </div>
     <div class="explore-button-2">EXPLORE</div> 
     </div>
 <div><img src="images/b4.jpg"></div>
 <div class="clear"></div>
     </div>
     </div>
     <div class="Gallery">
      <div class="Gallery-block1">
 <div class="tit-gallery">
 Gallery
 </div>
 <label class="blueline"></label>
 <div class="textbl">
 Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry.Lorem Ipsum has been the industry's standard dummy <br>text ever since the 1500s.
 </div>
 </div>
 <div class="Gallery-block2">
 <div class="G-p">
 <img src="images/03-01.jpg">
 <div class="G-words">Science Lab</div>
 </div >
 <div class="G-p">
 <img src="images/03-02.jpg">
 <div class="G-words">Indoor Stadium</div>
 </div>
 <div class="G-p">
 <img src="images/03-03.jpg">
 <div class="G-words">Transportation</div>
 </div>
 <div class="G-p">
 <img src="images/03-04.jpg">
 <div class="G-words">Kids Room</div>
 </div>
 <div class="G-p">
 <img src="images/03-05.jpg">
 <div class="G-words">Meditation</div>
 </div>
 <div class="G-p">
 <img src="images/03-06.jpg">
 <div class="G-words">Kid Playground</div>
 </div>
 <div class="clear"></div>
 </div>
 </div>
 </div>    
 <!-- 底部 -->
 <div class="footer">
 2016 immoc.com 京ICP备13046642号
 </div>
</body>
</html>
*{
	padding:0;
	margin:0;
	font-family: "Microsoft YaHei UI"
}
.top{
	width: 100%;
	height: 100px;
}
.header{
	width: 100%;
	height: 100px;
	background-color: rgb(7,203,201);
	position: fixed;
	z-index: 3;
}
.clear{
	clear: both;
}
.header img{
	width:260px;
	height:48px;
	margin-left: 40px;
	margin-top: 26px;
}
.logo{
	float:left;
}
.nav{
	float:right;
	margin-right: 200px;
}
.nav ul li{
	float:right;
	list-style: none;
	width: 80px;
	height:100px;
	line-height: 100px;
	color: rgb(255,255,255);
	font-weight: bold;
	text-align: center;

}
.nav ul li:hover{
	background-color: rgb(0,0,0);
	cursor: pointer;
}
.banner{
	overflow: hidden;
	margin-bottom: 20px;
}
.banner img{
	width:100%;
	height: 800px;
}
.banner .screen{
	position: absolute;
	top:100px;
	width:100%;
	height: 800px;
	background-color: rgb(0,0,0);
	opacity: 0.5;
}

.banner form{
	position: absolute;
	left: 50%;
	top: 310px;
	margin-left: -250px;
	width: 502px;
	height: auto;
	z-index: 1;
}
.banner form .input1{
	border-style: solid;
	border-width: 1px;
	height: 40px;
	width: 500px;
	border-color: rgb(255,255,255);
	color: rgb(255,255,255);
	line-height: 40;
	margin-top: 20px;
	background-color: transparent;
}
.banner form textarea:hover{
	border-color: rgb(7,203,201);
}
.banner .input1:hover{
	border-color: rgb(7,203,201);
}
.banner form textarea{
	border-style: solid;
	border-width: 1px;
	height: 120px;
	width: 500px;
	border-color: rgb(255,255,255);
	color: rgb(255,255,255);
	margin-top: 20px;
	text-align: left;
	resize: none;
	background-color: transparent;
}
.banner form .input2{
	border-style: solid;
	border-width: 1px;
	height: 50px;
	width: 120px;
	margin-left: 190px;
	border-color: rgb(255,255,255);
	color: rgb(255,255,255);
	line-height: 50px;
	margin-top: 20px;
	background-color: transparent;
}
.banner form .input2:hover{
	border-color: rgb(7,203,201);
	background-color: rgb(7,203,201);
}
.about-block1{
	width: 800px;
	margin: 0 auto;
	padding:20px 0;
}
.tit-about{
	font-size: xx-large;
	font-weight: bolder;
	text-align: center;
	margin-bottom: 10px;
}
.blueline {
	background-color:#07cbc9;
	display: block;
	width: 40px;
	height: 2px;
	margin:15px auto;
}
.textbl{
	text-align: center;
	color: grey;
	font-size: small;'
	margin-bottom: 20px;
}
.about-block2{
	width: 1000px;
	margin: 0 auto;
	padding-top: 20px;
	position: relative;
}
#awau{
	font-size: x-large;
	float: left;
	padding-right: 20px;
	font-weight: normal;
	text-align: center;
	line-height: 40px;
	padding-left: 100px;
}
.explore-box{
	border-style: solid;
	border-color: grey;
	border-width: 1px;
	height: 250px;
	width:300px;
	position: absolute;
	top:100px;
	left: 50px;
	float: left;
	z-index: 1;

}
.explore-text{
	opacity: 10;
	margin-top: 30px;
	margin-left:20px;
	font-size: 14px;
	line-height: 20px;
	z-index:1 ;
}
.explore-button{
	margin-top: 20px;
	margin-left: 20px;
	padding:10px;
	background-color: black;
	color: white;
	text-align: center;
	width: 100px;
	z-index: 1;
	position: absolute;

}
.explore-button:hover{
	color:black;
	background-color: white;
	border:1px solid;
	border-color: black;
	cursor: pointer;
}
.bottom-layer{
	width:100%;
	height: 100%;
	background-color:rgb(255,255,255);
	position: absolute;
	z-index: -1;
	opacity: 0.5;
	top: 0;
	left: 0;

}
.about-block2 img{
	width: 500px;
	height: 380px;
}
.rightdata{
	float: right;
	margin-right: 70px;
	margin-bottom: 30px;
	border-color: rgb(7,203,201);
	border-style: solid;
	border-width: 1px;
	height: 100px;
	width: 150px;
	text-align: center;
	clear: right;
}
.blueline2{
	background-color:#07cbc9;
	display: block;
	width: 40px;
	height: 2px;
	margin:10px auto;
}
.num{
	margin-top: 16px;
	font-weight: bold;
	height: 20px;
}
.about-block3{
	height: 600px;
	width: 100%;
	margin-top: 60px;
	background-color: rgb(7,203,201);
}
.about-block3 img{
	float: left;
	width: 25%;
	height: 300px;
}
.explore-box-2{
	box-sizing: border-box;
	float: left;
	width: 25%;
	height: 300px;
	color: white;
	font-size: large;
	padding: 30px;
}
.explore-text2 dt{
	padding-top: 10px;
	font-size: small;
	line-height: 20px;
}
.explore-text2 dd{
	padding-top: 10px;
	font-size: xx-small;
	line-height: 15px;
}

.explore-button-2{
	padding:10px;
	background-color: black;
	color: white;
	text-align: center;
	width: 100px;
	margin:20px auto;
}
.explore-button-2:hover{
	border-color: black;
	background-color: transparent;
	border-width: 1px;
	cursor: pointer;
}
.Gallery-block1{
	width: 800px;
	margin: 0 auto;
	padding:20px 0;
}
.tit-gallery{
	font-size: xx-large;
	font-weight: bolder;
	text-align: center;
	margin-bottom: 10px;
}
.Gallery-block2{
	width: 661px;/*为什么必须比实际需要的宽度大一点点才能容纳得下三个子元素的宽？*/
	margin:20px auto;

}
.G-p{
	width: 200px;
	height:200px;
	padding: 10px;
	float: left;
}
.G-p img{
	width:100%;
	height: 80%;
}
.G-words{
	text-align: center;
	height: 20%;
	background-color: black;
	color: white;
	line-height: 40px;
}
.footer{
	width: 100%;
	height:60px;
	background-color: rgb(7,203,201);
	text-align: center;
	color: white;
	line-height: 60px; 
}

在Gallery区域图片和底下黑底文字留有一点微小区域，并且父容器的宽要比并排的子元素稍大一点（比如子元素宽是220px，父元素为661）才能一行容纳三个，求老师教我消除Gallery的缝隙
爱动脑筋的小伙伴 2019-02-12
源自：网页布局案例   2-9 作业题
0
收起

正在回答

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

3回答
好帮手慕阿莹 回答被采纳获得+3积分 2019-02-13 10:59:33

img标签默认情况下display:inline-block;  img在div中的白边就是因为inline-block；造成的，

所以此时将img的display设置为block；白边就消失了。

display：block ，设置为块儿元素。

http://img1.sycdn.imooc.com//climg/5c6387dc00016de809210193.jpg

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！


0
收起回答
好帮手慕阿莹 2019-02-13 09:38:37

同学可以给

.G-p img{
    width:100%;
    height: 80%;
}

添加一个属性：

display:block;

这个是图片自带的一个边距，同学添加这个属性后可以去除。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

0
收起回答
提问者 爱动脑筋的小伙伴 2019-02-12 23:06:43

http://img1.sycdn.imooc.com//climg/5c62e0fd0001733711580765.jpg

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

单词间距的问题
14 0 5
请老师检查一下，关于设置图片之间的距离有疑惑
0 0 3
圆点间距问题？
38 0 5
页面导航栏这块出现省略号，同时间距过小
16 0 4
关于line-height的问题
21 0 3

登录后可查看更多问答，登录/注册

从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10204    个

如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答 作业

为什么这样不报错？

6 1

老师请问一下

1 4

老师这样写可以嘛

2 1

老师这样写可以吗

7 1

我为了实现两行三列的效果，设置了三级div。老师您看，这样编程符合要求吗

10 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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