CSS中的margin与padding有什么区别呢

最新推荐文章于 2025-07-20 14:33:09 发布
原创 最新推荐文章于 2025-07-20 14:33:09 发布 · 584 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #border #ie
本文详细介绍了CSS中的margin(外边距)、border(边框)和padding(内边距)的概念，并特别指出了在IE6及以下版本中存在的padding计算错误的BUG以及其对元素宽度的影响。

margin 外边距
border 边框
padding 内边距

也就是说 设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面

而且在IE6 一下的版本中 存在这padding 计算错误的BUG
CSS 的宽度属性本来是不包含padding的 但是 在ie下面有的时候宽度是包含padding 所以 建议在不熟悉CSS 在定位的时候 都用margin属性

 

CSS Padding 和 Margin 区别全解析
专注于与编程相关的知识内容分享
05-15 970
CSS中的padding和margin是控制元素间距的两个重要属性，但它们在作用区域、背景影响、空间计算、塌陷现象和数值特性等方面存在显著差异。padding控制元素内容与边框之间的距离，且会影响背景色的显示；而margin控制元素边框与其他元素之间的间距，且始终保持透明。margin允许负值且会发生垂直塌陷现象，而padding则不会。在实际应用中，padding常用于调整内容与边框的间距，而margin则用于控制元素之间的布局关系。通过浏览器开发者工具，可以直观地调试和观察padding和margin的
margin或padding值为1个、2个、3个、4个的时候分别代表什么意思
m0_62404884的博客
05-27 8945
margin的值为4个时：margin：上 右 下 左；（顺时针方向） margin的值为3个时：margin：上 右= 左 下； margin的值为2个时：margin：上=下 左=右； margin的值为1个时：上=右=下=左； padding同理 例如： margin：20px,30px,40px,60px ; (上20px， 右3px，下 40px，左60px) margin：20px,30px,40px ; (上20px， 左、右30px， 下40...
Padding 和 Margin 的区别详解
My_wife_QBL的博客
07-09 9843
padding属性用于设置元素内容与其边框之间的间距。换句话说，padding是元素内部的空间，它位于元素内容和边框之间。padding可以应用于元素的四个边（上、右、下、左），也可以分别设置每个边的值。margin属性用于设置元素与其相邻元素之间的间距。换句话说，margin是元素外部的空间，它位于元素边框与其他元素之间。margin同样可以应用于元素的四个边，也可以分别设置每个边的值。
CSS中margin和padding的区别
wujian_csdn_csdn的博客
09-16 3088
区别如下： margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。 CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 ...
css中margin 缩写方式
weixin_34341117的博客
06-18 424
<html> <body> <div style="border: 1px solid red;"> <div style="border: 1px solid blue; margin: 20px;"> margin: 20px;（上、下、左...
CSS中margin和padding属性的区别
weixin_50547200的博客
06-24 8044
在CSS中，margin和padding两个属性都可以调整位置，因此比较容易混淆。这篇文章详细分析两者的不同，希望对学习CSS的朋友有帮助。padding的作用是调整当前元素内容(例如文本内容)在元素中的位置。默认内容应该是紧贴元素的边界显示，增加padding后可以增大内容和边界的距离。可看如下代码： div.y未设置padding，而div.x设置了四个padding属性，其效果如下图： 大家可以看到在风格为div.y中，文字是紧贴div这个元素范围的边界的，也就是默认文字的高度和所覆盖的...
【css】padding 和 margin的区别
tyrantForever的博客
08-07 2970
css中有有一对经常是一起出现的属性：padding和margin，接下来我们以一个例子来看一下两个属性的作用及其区别。 实例演示： 使用属性前： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>paddingTest</title> </head> <style> .cl.
CSS中Padding与Margin的区别
最新发布
HTTP404_CN的博客
07-20 1585
CSS中Padding和Margin的区别：Padding控制元素内容与边框的内间距，会增大元素尺寸且受背景影响；Margin控制元素与其他元素的外间距，透明不影响元素自身尺寸。关键差异包括位置、背景可见性、尺寸影响等。Padding常用于调整内容间距，Margin用于控制元素间隔。注意盒模型计算、负值支持和外边距折叠现象。掌握两者区别能更精准实现页面布局。
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
未曾远去
07-10 3816
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距、padding-right:10px; 右内边距、padding-top:10px; 上内边距、padding-bottom:10px; 下内边距。 margin：margin-left:10px; 左外边距、margin-righ...
CSS中margin和padding的区别(1)
YaoXTao的专栏
04-23 1430
本文导读：padding margin都是边距的含义，关键问题得明白是什么相对什么的边距．padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．       在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。       下面讲解 padd
CSS样式中margin和padding的区别
雨还在下的博客
07-06 734
margin操作是对边框距离的调整如 margin-top .... 主要用作于两个标签之间的距离，如两个div标签之间距离 padding是标签中内容对标签框的距离调整如 padding-top 主要用作于内容和边框之间的距离，如一个p标签中有一段话，但是有不想紧贴着边框.所以就可以使用padding标签来使边框和文字产生距离. ...
css中的padding和margin的区别和使用
qq_39822872的博客
01-15 484
1.margin是指从元素自身边框到另一个元素边框之间的距离，就是容器之外距离。而padding是指元素自身边框到自身内部另一个元素边框之间的距离，就是容器内距离。好比你的屋子作为目标元素 ，屋外的东西和屋子的距离用margin，屋内的东西和屋子的距离用padding 2. padding的用法： 1、padding:10px 20px 30px 40px; 上、右、下、左内边距 2、pa...
margin 和padding有什么区别？
whaosy的专栏
08-28 4053
<br />首先来看下盒子模型：<br />#box{<br />width:300px;<br />height:200px;<br />margin:10px;<br />border:1px solid #000;<br />padding:10px;<br />}<br />结果如图：<br /><br /><br /> <br />黄色部分为10px的外补白，蓝色部分为10px的内补白。事实上id为box的容器实际占用的空间为342px的宽和242px的高，里面300*200px是content区
margin或者padding值为4个、3个、2个、1个的时候分别是什么意思
热门推荐
milklili的博客
08-28 3万+
以margin为例，padding同理 margin为4个时，margin:上  右  下  左;（为顺时针方向） margin为3个时，margin:上   左=右   下; margin为2个时，margin:上=下   左=右; margin为1个时，margin:上=右=下=左;
margin后边的参数个数大解析
莫雨 · 涛
12-14 1315
margin: 10px;（上、下、左、右各10px。） margin: 10px 10px;（上、下10px；左、右20px。） margin: 10px 20px 20px;（上10px；左、右20px；下30px。） margin: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）类推，padding,border亦是如此！
手机端页面padding-left,padding-right或margin-left,margin-right会使页面左右摇晃
YiRong
08-21 4450
最近在做一个类似赚一兜应用的分享网页，需要适配到手机端，遇到一个问题，就是如果设置文章的padding-left,padding-right或margin-left,margin-right时，手机上查看手指触摸滑动会左右摇晃页面，试过各种方法，最后才发现漏了一句代码： 解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚
在dreamweaver中如何设置字间距?
zhdd1234的专栏
02-27 1万+
"letter-spacing"  在css里面设置
div 上移下移技术
zhdd1234的专栏
05-07 2841
 作者地址：http://www.52hai.com/2005/article.asp?id=1861要移到中间，就有上移与下移 .a7container {FLOAT: left; WIDTH: 385px; POSITION: relative}.a2 {FLOAT: left; WIDTH: 385px; POSITION: relative;}#rc4 {BACKGRO
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值