为什么img的margin-top无效，margin-bottom有效？img已经设置为block。

[恋喵大鲤鱼]

为什么img的margin-top无效，margin-bottom有效？img已经设置为block。具体见下面的代码：

<style type="text/css">
    #albumContainer{background-color:rgba(0,0,0,0.1);border-radius:10px;width:750px;margin:30px auto;}
    #albumContainer img{display:block;width:25%;margin:10px auto;}
</type>

<li id="iLi2">
					<div id="albumContainer">
						<img alt="album" src="res/img/album001.png">
						<ul id="albumList">
							<li id="family">
								<img alt="相册" src="res/img/photo/family/family0.jpg">
								<span>family</span>
							</li>
							<li id="sister">
								<img alt="相册" src="res/img/photo/sister/sister0.jpg">
								<span>dear sister</span>
							</li>
							<li id="cat">
								<img alt="相册" src="res/img/photo/cat/cat0.jpg">
								<span>big lazy cat</span>
							</li>
							<li id="me">
								<img alt="相册" src="res/img/photo/me/me000.png">
								<span>me</span>
							</li>
						</ul>
					</div>
</li>

显示的结果为:


为什么在上面对img使用了margin:10px auto;对下外边距有效，对上外边距却没有效果呢？

[天际的海浪]

这是外边距合并特性 http://www.w3school.com.cn/css/css_margin_collapsing.asp 解决方法是为父元素设置overflow:hidden;

[恋喵大鲤鱼]

引用 1 楼 jslang 的回复:

这是外边距合并特性 http://www.w3school.com.cn/css/css_margin_collapsing.asp 解决方法是为父元素设置overflow:hidden;

引用 2 楼 u010080006 的回复:

楼上说的对，两种方法 1：使用padding-top 2:给父元素overflow:hidden

正解，也谢谢楼上的指点。

[给谁看]

楼上说的对，两种方法 1：使用padding-top 2:给父元素overflow:hidden