CSS中padding和margin的区别

最新推荐文章于 2024-01-11 09:28:36 发布

kiruma

最新推荐文章于 2024-01-11 09:28:36 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/qq_34761108/article/details/79846303

版权

padding:内边距 margin: 外边距

其中盒子的总高度（总宽度）为：border+margin+padding+height(width),如下：

注意外边距部分是透明的。所以如果我们定义了padding，我们的盒子会变大：

 div.outer{
            width: 400px;
            height: 400px;
            border: 2px solid #000;
        }        
        div.inner{
            width: 200px;
            height: 200px;
            background-color:red ;
         
            border: 2px solid #000;
        }    
       
    </style>
<body>
	<body>
        <div class="outer">
            <div class="inner">
            </div>
        </div>
    </body>
</body>

在div.inner中加上padding:50px; 我们可以发现盒子变大了。

而如果想要两个元素之间存在透明的区域，使用padding是不行的,要使用margin.

<style>        
        div.outer{
            width: 400px;
            height: 400px;
            border: 2px solid #000;
        }        
        div.inner{
            width: 200px;
            height: 200px;
            background-color:red ;
         
            border: 2px solid #000;
        }    
        div.aaa{
        	width: 50px;
        	height: 50px;
        	background-color:green ;
        	padding: 10px;
        	margin: 10px;
        }
       
    </style>

	<body>
        <div class="outer">
            <div class="inner">
            	<div class="aaa"></div>
            	<div class="aaa"></div>
            </div>
        </div>
    </body>

kiruma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中padding和margin的区别

padding:内边距 margin: 外边距其中盒子的总高度（总宽度）为：border+margin+padding+height(width),如下：注意外边距部分是透明的。所以如果我们定义了padding，我们的盒子会变大： div.outer{ width: 400px; height: 400px; border: ...
复制链接

扫一扫