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

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

已完成作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
*{
    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

同学可以给

1
2
3
4
.G-p img{
    width:100%;
    height: 80%;
}
1
<br>

添加一个属性：

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
您的移动学习伙伴

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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