设置了margin显示不出来了

<!DOCTYPE html>
<html>
<head>
	<title>CSS网页布局</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<!--头部-->
	<div class="header">
		<div class="logo">
			<img src="image/logo.png">
		</div>
		<div class="nav">
			<ul>
				<li>首页</li>
				<li>图片</li>
				<li>视频</li>
				<li>手记</li>
			</ul>
		</div>
	</div>
	<!--主体-->
	<div class="main">
		<div class="top">
			<img src="image/1.jpeg">
		</div>
		<div class="topLayer"></div>
		<div class="topLayer-top">
			<div class="word">MY BEAUTIFUL LIFE	</div>
			<button>LOOK MORE &gt</button>

		</div>
		<div class="middle">
			<div class="m-top">
				<div class="commen">
					<img src="image/weibo.png">
					<div class="comm">MICROBLOG</div>
				</div>
				<div class="commen">
					<img src="image/weixin.png">
					<div class="comm">WEICHAT</div>
				</div>
				<div class="commen">
					<img src="image/qq.png">
					<div class="comm">qq</div>
				</div>
			</div>
			<div class="clear"></div>
			<div class="m-middle">
				"I want to give good things to record down,<br>
				after the recall will be very beautiful."
			</div>
			<div class="m-bottom">
				<div class="m-com">
					<img src="image/03-01.jpg">
					<div class="des1">Cool Image</div>
					<div class="des2">Record The Picture</div>
				</div>
				<div class="m-com">
					<img src="image/03-02.jpg">
					<div class="des1">Cool Image</div>
					<div class="des2">Record The Picture</div>
				</div>
				<div class="m-com">
					<img src="image/03-03.jpg">
					<div class="des1">Cool Image</div>
					<div class="des2">Record The Picture</div>
				</div>
			</div>

		</div>
		<div class="bottom">
			<div class="content">
			<div class="title">
				FROM THE PHOTO ALBUM
			</div>
			<div class="pic-content">
				<dl>
					<dt><img src="image/04-01.jpg"></dt>
					<dd>Life is like a book,just read more and more refined,more write more carefully.when read,mind open ,all things  havae been indifferent to heart .Life is the precipition</dd>
				</dl>
				<dl>
					<dt><img src="image/04-02.jpg"></dt>
					<dd>Life is like a book,just read more and more refined,more write more carefully.when read,mind open ,all things  havae been indifferent to heart .Life is the precipition</dd>
				</dl>
			</div>
			<div class="clear"></div>

			</div>

		</div>
	</div>
	<!--底部-->
	<div class="footer"></div>

</body>
</html>

*{
	padding: 0;
	margin:0;
}
.header{
	width: 100%;
	height: 100px;
	
}
.header img{
	width: 300px;
	height: 85px;
	padding-left: 100px;
	padding-top: 8px;
}
.header .logo{
	float: left;
}
.header .nav{
	float: right;
}
.header .nav ul li{
	float: left;
	width: 80px;
	height: 100px;
	list-style: none;
	line-height: 100px;
	font-size: 15px;
	font-weight: bold;
	color: #7d7d7d;
}
.main .top{
	width: 100%;
	height: 600px;

}
.main .top img{
	width: 100%;
	height: 600px;
}
.main .topLayer{
	position: absolute;
	top: 100px;
	left: 0px;
	background-color: black;
	width: 100%;
	height: 600px;
	opacity: 0.5;
}
.main .topLayer-top{
	width: 500px;
	height: 300px;
	
	position: absolute;
	top: 400px;
	margin-top: -150px;
	z-index: 2;
	left: 50%;
	margin-left: -250px;


}
.main .topLayer-top .word{
	padding-top: 100px;
	color: #fff;
	font-size: 45px;
	font-weight: bolder;
	text-align: center;
	font-family: "微软雅黑";
}
.main .topLayer-top button{
	width: 200px;
	height: 60px;
	margin-top: 50px;
	color: #000;
	background-color: #f5704f;
	font-family: "微软雅黑";
	text-align: center;
	font-size: 14px;
	border-radius: 8px;
	margin-left: 150px;



}
.main .middle{
	width: 1000px;
	margin: 0 auto;

}
.main .middle .m-top .commen{
	width: 33.3%;
	float: left;
	padding-top: 50px;
	text-align: center;

}
.main .middle .m-top .commen .comm{
	font-size: 20px;
	color:#7d7c7f;
	font-weight: bold;
	padding-top: 20px;

}
.main .middle .m-top .commen img{
	width: 100px;
	height: 100px;

}
.main .middle .m-middle{
	font-size: 22px;
	color: #E19796;
	font-weight: bold;
	padding-top: 50px;
	font-style: italic;
	text-align: center;
}
.clear{
	clear: both;
}
.main .middle .m-bottom .m-com{
	width: 33.3%;
	float: left;
	text-align: center;
	margin-top: 68px;

}
.main .middle .m-bottom .m-com img{
	width: 310px;
	height: 260px;
}
.main .middle .m-bottom .m-com .des1{
	font-size: 20px;
	font-weight: bold;
	color: #7d7d7d;
	padding-top: 20px;

}
.main .middle .m-bottom .m-com .des2{
	font-size: 20px;
	font-weight: bold;
	padding-top: 10px;
	color: #bdbdbc;
	
}
.main .bottom{
	clear: both;
	background-color: #f9f9f9;



}
.main .content{
	width: 1000px;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #7d7d7d;
	font-family: "微软雅黑";
	padding-top: 50px;

}
.main .bottom .content .pic-content dl{
	float: left;
	width: 470px;
	margin: 10px 12px;
	
}
.main .bottom .content .pic-content .dl img{
	width: 470px;
	height: 460px;

}

我的.main .bottom .content .pic-content dl设置了margin：10px 12px 为什么显示不出来呢

心字香烧 2019-06-26

源自：网页布局案例 2-7 主体部分的底部

收起

1回答

好帮手慕柯南 2019-06-26 14:56:58

同学你好！

我们来看一下dl处的布局
很明显可以看到图片的宽度超出了dl的范围，因此我们需要给图片设置一个宽度，将图片设置为100%，充满它的父元素即可

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

收起回答

提问者心字香烧 #1

但是老师这里写的是width：470px 与dl的宽度一样呀老师的显示效果就没问题我的显示效果就出现问题了

2019-06-26 14:59:21
提问者心字香烧 #2

老师你没看我的代码我最后的css写成了.dl .dt img{ } 实际上应该是dl dt img{} 我现在改过来了

2019-06-26 15:02:41
好帮手慕柯南回复提问者心字香烧 #3

同学这里图片如果大，不设置宽度，会超出父元素呢。所以同学需要设置一下呢，老师这里给图片设置了width=“100%”；才正常显示的呢。祝学习愉快~

2019-06-26 15:04:17