css中padding与margin的奥秘

贵哥的编程之路

发布于 2020-10-28 10:34:29

4800

发布于 2020-10-28 10:34:29

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		 div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1
        {
        	padding-top: 20px;
        }
        .box2
        {
        	padding-top: 40px;
        }
        .box3
        {
        	padding-top: 80px;
        }
        .box4
        {
        	padding-top: 160px;
        }
        .box5
        {
        	padding:20px;
        }
	</style>
</head>
<body>
<div class="box1">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box3">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box4">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box5">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>

核心：1.什么是内边距? 边框和内容之间的距离就是内边距注意点: 1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化 2.给标签设置内边距之后, 内边距也会有背景颜色

margin：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
            padding:0;
            margin:0;
        }
        
        span
        {
        	display: inline-block;
        	width: 100px;
        	height: 100px;
        	border:1px solid red;
        	background: yellow;
        }
        div
        {
        	height: 100px;
        	border: 1px solid red;
        }
        .box1{
            
            margin:20px;
        }

	</style>
</head>
<body>
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span><div class="box4"></div>

</body>
</html>

1.什么是外边距? 标签和标签之间的距离就是外边距

注意点: 外边距的那一部分是没有背景颜色的

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css