CSS中padding和margin的区别

最新推荐文章于 2025-05-15 05:40:07 发布

原创最新推荐文章于 2025-05-15 05:40:07 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解释了CSS中内边距(padding)与外边距(margin)的区别及应用。通过具体的例子说明了如何使用这两种属性来调整网页元素的空间布局，特别强调了在需要创建透明区域时应使用margin而非padding。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>