GALLERY区文本设置问题

HTML:

<div class="galleryimage">

<div class="image-text">

<img src="images/03-01.jpg">

<div class="galleryimg-text">SCIENCE LAB</div>

</div>

<div class="image-text">

<img src="images/03-02.jpg">

<div class="galleryimg-text">INDOOR STADIUM</div>

</div>

<div class="image-text">

<img src="images/03-03.jpg">

<div class="galleryimg-text">TRANSPORTATION</div>

</div>

<div class="image-text">

<img src="images/03-04.jpg">

<div class="galleryimg-text">KIDS ROOM</div>

</div>

<div class="image-text">

<img src="images/03-05.jpg">

<div class="galleryimg-text">MEDITATION CLASSES</div>

</div>

<div class="image-text">

<img src="images/03-06.jpg">

<div class="galleryimg-text">KIDS PLAYGROUND</div>

</div>

</div>

CSS:

.galleryimage{

width: 1000px;

height: 460px;

margin-top: 25px;

}

.image-text{

width: 300px;

height: 200px;

margin-right: 30px;

margin-bottom: 30px;

float: left;

}

.galleryimage img{

width: 300px;

height: 200px;

margin-right: 30px;

margin-bottom: 30px;

}

.galleryimg-text{

width: 300px;

height: 50px;

line-height: 50px;

background-color: black;

color: white;

margin-top: -84px;

margin-left:0px;

font-family: Microsoft YaHei UI;

}

同学，你好！同学的代码逻辑清晰，稍微调整下样式即可

1、外层<div class="image-text">底部边距不够，可调整为80px

.image-text{
	width: 300px;
	height: 200px;
	margin-right: 30px;
	/* argin-bottom: 30px; */
	margin-bottom: 80px;
	float: left;
}

2、图片和底部的文字之间没有距离，不用设置底部外边距

.galleryimage img{
	width: 300px;
	height: 200px;
	margin-right: 30px;
	/* margin-bottom: 30px; */
}

3、文字div嵌入图片过多，顶部边距可调整为-5px

.galleryimg-text{
	width: 300px;
	height: 50px;
	line-height: 50px;
	background-color: black;
	color: white;
	/* margin-top: -84px; */
	margin-top: -5px;
	margin-left:0px;
	font-family: Microsoft YaHei UI;
}

​祝：学习愉快！