CSS - 盒模型 margin的常见需求

最新推荐文章于 2022-07-18 12:02:07 发布

LSYHhhhh

最新推荐文章于 2022-07-18 12:02:07 发布

阅读量222

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_33961117/article/details/82841900

版权

父子场景下

需求一:sup（父亲）左上右顶格显示。即，消除默认8px

需求二：儿子在父亲的水平中央显示（儿内 margin: 0 auto;）

需求三：儿子在父亲的垂直中央显示

需求四：儿子在父亲的水平居右显示（margin-right：0）

父子场景下

需求一:sup（父亲）左上右顶格显示。即，消除默认8px

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>margin</title>
	<style type="text/css">

		/*需求1:sup（父亲）左上右顶格显示
			即，消除默认8px*/
		html, body {
			/*初始化操作，body默认具有margin: 8px*/
			margin: 0;
		}

		/*前提:
		sup显示区域宽全屏,高200px,红色。
		sub显示区域宽高个100px，橘色。*/
		.sup {
			width: auto;
			height: 200px;
			background-color: red;
		}
		.sub {
			width: 100px;
			height: 100px;
			background-color: orange;
		}
		
	</style>
</head>
<body>
	<div class="sup">
		<div class="sub"></div>
	</div>
</body>
</html>

需求二：儿子在父亲的水平中央显示（儿内 margin: 0 auto;）

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>margin</title>
	<style t

最低0.47元/天解锁文章

LSYHhhhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS - 盒模型 margin的常见需求

目录父子场景下需求一:sup（父亲）左上右顶格显示。即，消除默认8px需求二：儿子在父亲的水平中央显示（儿内 margin: 0 auto;）需求三：儿子在父亲的垂直中央显示需求四：儿子在父亲的水平居右显示（margin-right：0）父子场景下需求一:sup（父亲）左上右顶格显示。即，消除默认8px&lt;!DOCTYPE html&gt;&lt;html...
复制链接

扫一扫