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

最新推荐文章于 2025-05-15 05:40:07 发布
最新推荐文章于 2025-05-15 05:40:07 发布
阅读量540 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css样式控制 文章标签： css border ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhdd1234/article/details/5603383
本文详细介绍了CSS中的margin(外边距)、border(边框)和padding(内边距)的概念，并特别指出了在IE6及以下版本中存在的padding计算错误的BUG以及其对元素宽度的影响。

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

margin 外边距
border 边框
padding 内边距

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

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

 

CSS中的margin与padding
hulin的博客
08-27 6269
CSS中的margin与padding
Class与ID区别 margin和padding区别 CSS学习笔记
10-30
CSS学习笔记 - Class与ID区别、margin和padding区别 在CSS学习中，有两个非常重要的概念：Class与ID和margin与padding。虽然它们都是CSS中的基本概念，但是许多初学者却不知道它们的区别和使用场景。 Class与ID...
CSS中margin和padding的区别(1)
YaoXTao的专栏
04-23 1346
本文导读：padding margin都是边距的含义，关键问题得明白是什么相对什么的边距．padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．       在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。       下面讲解 padd
【css】padding 和 margin的区别
tyrantForever的博客
08-07 2926
css中有有一对经常是一起出现的属性：padding和margin，接下来我们以一个例子来看一下两个属性的作用及其区别。 实例演示： 使用属性前： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>paddingTest</title> </head> <style> .cl.
CSS中margin和padding的区别
wujian_csdn_csdn的博客
09-16 3019
区别如下： margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。 CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 ...
CSS中margin和padding的区别浅析
09-24
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。下面讲解 padding和margin常用的用法
css中margin和padding有什么区别
02-20
margin和padding都是CSS用来控制元素的外边距的属性。margin是控制元素外边距的距离，而padding是控制元素内边距的距离。margin会影响元素的绝对定位，而padding会影响元素的相对定位。
css中的padding和margin的区别和使用
qq_39822872的博客
01-15 437
1.margin是指从元素自身边框到另一个元素边框之间的距离，就是容器之外距离。而padding是指元素自身边框到自身内部另一个元素边框之间的距离，就是容器内距离。好比你的屋子作为目标元素 ，屋外的东西和屋子的距离用margin，屋内的东西和屋子的距离用padding 2. padding的用法： 1、padding:10px 20px 30px 40px; 上、右、下、左内边距 2、pa...
CSS Padding 和 Margin 区别全解析
最新发布
专注于与编程相关的知识内容分享
05-15 739
CSS中的padding和margin是控制元素间距的两个重要属性，但它们在作用区域、背景影响、空间计算、塌陷现象和数值特性等方面存在显著差异。padding控制元素内容与边框之间的距离，且会影响背景色的显示；而margin控制元素边框与其他元素之间的间距，且始终保持透明。margin允许负值且会发生垂直塌陷现象，而padding则不会。在实际应用中，padding常用于调整内容与边框的间距，而margin则用于控制元素之间的布局关系。通过浏览器开发者工具，可以直观地调试和观察padding和margin的
Padding 和 Margin 的区别详解
My_wife_QBL的博客
07-09 8207
padding属性用于设置元素内容与其边框之间的间距。换句话说，padding是元素内部的空间，它位于元素内容和边框之间。padding可以应用于元素的四个边（上、右、下、左），也可以分别设置每个边的值。margin属性用于设置元素与其相邻元素之间的间距。换句话说，margin是元素外部的空间，它位于元素边框与其他元素之间。margin同样可以应用于元素的四个边，也可以分别设置每个边的值。
margin或padding值为1个、2个、3个、4个的时候分别代表什么意思
m0_62404884的博客
05-27 8781
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...
css中margin 缩写方式
weixin_34341117的博客
06-18 395
<html> <body> <div style="border: 1px solid red;"> <div style="border: 1px solid blue; margin: 20px;"> margin: 20px;（上、下、左...
margin 和padding有什么区别？
whaosy的专栏
08-28 3987
<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区
CSS中margin和padding属性的区别
weixin_50547200的博客
06-24 7852
在CSS中，margin和padding两个属性都可以调整位置，因此比较容易混淆。这篇文章详细分析两者的不同，希望对学习CSS的朋友有帮助。padding的作用是调整当前元素内容(例如文本内容)在元素中的位置。默认内容应该是紧贴元素的边界显示，增加padding后可以增大内容和边界的距离。可看如下代码： div.y未设置padding，而div.x设置了四个padding属性，其效果如下图： 大家可以看到在风格为div.y中，文字是紧贴div这个元素范围的边界的，也就是默认文字的高度和所覆盖的...
手机端页面padding-left,padding-right或margin-left,margin-right会使页面左右摇晃
YiRong
08-21 4387
最近在做一个类似赚一兜应用的分享网页，需要适配到手机端，遇到一个问题，就是如果设置文章的padding-left,padding-right或margin-left,margin-right时，手机上查看手指触摸滑动会左右摇晃页面，试过各种方法，最后才发现漏了一句代码： 解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚
CSS样式中margin和padding的区别
雨还在下的博客
07-06 702
margin操作是对边框距离的调整如 margin-top .... 主要用作于两个标签之间的距离，如两个div标签之间距离 padding是标签中内容对标签框的距离调整如 padding-top 主要用作于内容和边框之间的距离，如一个p标签中有一段话，但是有不想紧贴着边框.所以就可以使用padding标签来使边框和文字产生距离. ...
margin或者padding值为4个、3个、2个、1个的时候分别是什么意思
热门推荐
milklili的博客
08-28 3万+
以margin为例，padding同理 margin为4个时，margin:上  右  下  左;（为顺时针方向） margin为3个时，margin:上   左=右   下; margin为2个时，margin:上=下   左=右; margin为1个时，margin:上=右=下=左;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值