老师,padding我理解上出现一些问题。

老师,padding我理解上出现一些问题。

padding到底应该加在父级上还是子级上?

比如下面代码,加在了父级上:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{width: 200px;height: 200px; background-color: red; padding: 30px;}
			.son{background-color: yellow;}
		</style>
	</head>
	<body>
		<div class="box">
			<span class="son">占位文字</span>
		</div>
	</body>
</html>

如果这么加,我理解为是父级对它的内容产生了padding,并且撑大父级自己。

下面代码加在了子级上,我理解为,是子级对内容文字产生padding,并把子级自己撑大了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{width: 200px;height: 200px; background-color: red; }
			.son{background-color: yellow;padding: 30px;}
		</style>
	</head>
	<body>
		<div class="box">
			<span class="son">占位文字</span>
		</div>
	</body>
</html>

那么通常我们再布局的时候需要让内容距离边框有距离,那么就把padding放在父级中就可以了,这么理解对吗?

正在回答

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

2回答

div盒模型默认是content-box,在宽度和高度之外绘制元素的内边距和边框。也就是设置的padding会影响元素本来设置好的宽高。

提问者 小白小白撇地雷 2018-04-24 10:03:03

我又想了想应该是这样,padding 是给盒模型的盒子填充内边距,所以想要让内容与盒子产生边距,直接给盒子加填充就可以了,给盒子加了填充后,盒子自然就撑大了。
老师这样理解对吗?

  • 也可以这样理解.对于你的代码中,子元素也就是span就相当于父元素div的内容.所以想让span和盒子产生边距,直接给父元素div加padding就可以啦
    2018-04-24 11:20:13
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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