您所在的位置： &
为什么padding和margin在span中不好用
时间： 编辑：我是代码努力 来源：CnBlogs
为什么padding和margin在span中不好用:可能标题的问题并不被所有人认同，有的可能觉得padding和margin是好用的，而有的却认为是不好用的。下面通过实例分别介绍一下两个属性在span中到底好不好用。一.padding属性:
&!DOCTYPE html&
&meta charset=" utf-8"&
&meta name="author" content="http://www.51texiao.cn/" /&
&title&教程&/title&
&style type="text/css"&
padding:20
padding-left:20
padding-right:20
&span class="first"&蚂蚁部落&/span&
&span class="second"&蚂蚁部落&/span&
从以上代码可以看出第一个span设置的padding并没有完全正确的得到渲染，而是上边框无法显示，可能在某些浏览器中，下边框也不能显示。第二个span设置的左右内边距都是正常的。由此可以得出，默认状态下，span的左右内边距是好用的，上下内边距可能产生问题。
二.margin属性:
&!DOCTYPE html&
&meta charset=" utf-8"&
&meta name="author" content="http://www.51texiao.cn/" /&
&title&CSS教程&/title&
&style type="text/css"&
height:100
margin-left:20
margin-right:20
&div&&span class="first"&蚂蚁部落&/span&&/div&
&div&&span class="second"&蚂蚁部落&/span&&/div&
其实margin和padding是一样的，也是左右外边距是有效的，上下外边距可能出现问题。解决这个问题的方法很简单，就是让span变为块级元素即可。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/89.html
最原始地址是:http://www.softwhy.com/forum.?mod=viewthread&tid=4697
热门关键字在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
codepen在线演示:
div.flo是左浮动元素, div.b3清除了浮动, 其margin-top却被忽略掉了. 注意这两个元素由一个section元素包裹.
下面是我观察到的一些情况:
如果没有这个section包裹, 则div.b3的margin-top有效.
如果给这个包裹用的section元素用任何防止的方法(比如说设置'overflow:', 加padding或border, 浮动, 绝对定位等), 则div.b3的margin-top有效.
如果没有div.flo, 则div.b3的margin-top有效, 尽管会发生margin collapsing.
以上三个情况在熟悉了BFC和margin collapsing之后都好理解.
而这个在线演示的奇怪之处就在于它引入了clearance和margin collapsing, 我不明白的地方就是这两个效果共同作用的机理 . 我看了W3C上和margin collapsing的内容, 然而并没有搞清原因.
stackoverflow上有几个一样的问题(其中有一个问题长达五年之久, 始于10年, 五年后的现在, 答案排在第一的作者虽然给出了解决办法, 但也坦言仍然没搞清楚原理), 可惜回答都没有满意的.
&section style="height: 20"&
&/section&
&div class="flo"&&/div&
&div class="b3"&&/div&
&/section&
&p&The bottom margin of div.b3 collapses with this p element. But the top margin of b3 with clearance is mysteriously ignored.&/p&
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-
background:
margin-top: 20
width: 150
background:
border: 5px dashed #ff9e2c;
width: 100
height: 100
background: #4e97
margin: 1000px 0 20px 0;
background: #6AC5AC;
margin: 15px 0;
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我之前貌似也遇到过同样问题，但因为什么忘记了，反正就是因为 clear 引起的。给父级加上 overflow: 就解决了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一年后回来看这个问题，从@HaoyCn的回答里得到了灵感，让我重新读，发现答案其实就在那。
关于clearance（间隙）
这一部分分析为什么div.b3顶部的margin无论如何增大，div.b3都保持在div.flo的下方位置而不改变。
Values other than 'none' potentially introduce clearance.
Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge. This position is where the actual top border edge would have been if the element's 'clear' property had been 'none'.
If this hypothetical position of the element's top border edge is not past the relevant floats, then clearance is introduced
Then the amount of clearance is set to the greater of:
The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.
The amount necessary to place the top border edge of the block at its hypothetical position.
The clearance can be negative or zero.
上述规范告诉我们， 当clear属性不是none的时候，hypothetical position顶部border的边缘没有低于对应的浮动元素底部外边缘(bottom margin)的时候，clearance就会出现。
那么clearance有多少呢？上述规范说了取两种情况下计算结果的最大值。
就本例而言:假设：section的顶部border边缘为纵坐标0。div.b3的顶部margin是M2, div.flo高度为H（含外边距）。第一种情况的clearance为C1，第二种情况的clearance为C2。
第一种情况的clearance说的是把div.b3的border边缘放在与div.flo底部外边缘平齐的位置所需要的必要数量。按照上述计算规则，当clearance出现的时候section的margin和div.b3的margin不会collapse（具体见第二部分）
H = M2 + C1
C1 = H - M2
= 10px - 1000px
第二种情况的clearance说的是把div.b3上边缘放在hypothetical position（也就是clear为none的时候）所需的必要数量。
0 = M2 + C2
取两者最大值为-900px，即为clearance的大小。所以div.b3的border上边缘始终会在div.flo底部外边缘的下方，但由于上述的计算规则，尤其注意第二种情况下div.b3不会因为顶部margin增加而改变位置。
关于margin collapsing
这一部分分析为什么div.b3的顶部margin不与section的顶部margin发生collapse。
现在clearance处在section的顶部margin和div.b3的顶部margin之间，根据的规定，section和div.b3这两margin不会collapse，相关规范的细节如下：
Adjoining vertical margins collapse, (except: ...)
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
top margin of a box and top margin of its first in-flow child
本例中的情况适用于上述两种相邻关系（adjoining）。vertically-adjacent虽然满足，但no clearance这一条不满足，所以不会发生margin collapse。
当然规范在Note里同样以更通俗的语言提到了这一点：
The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance
注意： 这里div.flo，所以section的first in-flow child是div.b3。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。margin: 0 auto和margin:auto是什么区别_百度知道
margin: 0 auto和margin:auto是什么区别
我有更好的答案
margin: 0 auto； 就是上下距离为0， auto就是左右自适应两边距离一样，margin:auto；效果就是左右自适应两边距离一样，效果是一样的，
就好像margin：5px效果 ==margin：5px 5px 5px 5
可以理解为简写， margin：0 auto，这个0，本身就是没有效果的，
采纳率：58%
margin：0 auto
代表的是 上下边距为0
margin：auto
这个写法我还没用过
margin后面是有4个参数的。:margin:1px 1px 1px 1px,分别表示上右下左。如果只写2个参数的话，比如：margin：1px 2px，表示上下为1px，左右2px。margin: 0 auto表示元素上下边距为0，左右边距自适应。标准的居中写法。margin:auto起不了什么效果。
1条折叠回答
为您推荐：
其他类似问题
margin的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。margin是什么意思_百度知道
margin是什么意思
我有更好的答案
英['mɑ:dʒɪn]
美[ˈmɑrdʒɪn]
边缘，范围;极限;利润，盈余;（版心外）的空白
留边;成为…的边;加边于，围绕;为…加旁注
名词复数:margins
[例句]Second , margin loans are callable.其次，保证金贷款随时可以收回。如有疑问，请追问~如果有帮助，请采纳，O(∩_∩)O谢谢~
采纳率：88%
来自团队：
margin英 [ˈmɑ:dʒɪn] 美 [ˈmɑ:rdʒən]n. 边缘，范围；极限；利润，盈余；（版心外）的空白vt. 留边；成为…的边；加边于，围绕；为…加旁注边缘；幅度；保证金；余量 双语例句1. The group had a net profit margin of 30% last year.去年，这个集团的纯利润率为30%。2. The Sunday Times remains the brand leader by a huge margin.《星期日泰晤士报》仍以巨大的优势稳居报业龙头的地位。3. They could end up with a 50-point winning margin.他们最终可能会以50分的优势获胜。4. She began rubbing out the pencilled marks in the margin.她开始擦掉空白处的铅笔笔迹。5. The margin in favor was 280-to-153.赞成票以280票比153票的优势领先。
margin生词本去背诵英 [ˈmɑ:dʒɪn]美 [ˈmɑ:rdʒən]n.边缘，范围； 极限； 利润，盈余； （版心外）的空白vt.留边； 成为…的边； 加边于，围绕； 为…加旁注网 络边缘；保证金；边界；边距
边距，很多软件或者图形界面设计语言控件都有这个属性。
其他1条回答
为您推荐：
其他类似问题
margin的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。CSS边距属性定义:用margin还是用padding
当前位置： >
> CSS边距属性定义:用margin还是用paddingCSS边距属性定义:用margin还是用padding更新：&&&&编辑：安菱&&&&来源：互联网&&&&人气：加载中...&&&&字号：|标签：&&&&&&&&&&&&
呢小简介：用margin用padding这个是每个学习CSS进阶时的必经之路。
用margin用padding这个是每个学习CSS进阶时的必经之路。CSS边距元素周围的。通过单独的，可以对上、右、下、左的外边距进行设置。也可以简写的外边距属性同时改变所有的外边距。&&W3School边界(margin)：元素周围生成额外的空白区。&空白区&通常是指其他元素不能出现且父元素背景可见的区域。&&CSS权威指南padding称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜爱CSS权威指南解释的&补白&（或者叫&留白&），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。&&CSS权威指南关于什么时候用margin什么时候用padding，网上有许许多多的讨论，大多数似乎讨论到点上面，却又有些隔靴搔痒的感到，总是答不到点上。而且margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的效果都一样，你说margin用起来好他说padding用起来会更好，但往往争辩无果。根据网上的总结归纳大致发现这几条还是对比靠谱的：何时该当应用margin：需要在border外侧添加空白时。空白处不需要背景（色）时。高低相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。何时该当时用padding：需要在border内测添加空白时。空白处需要背景（色）时。高低相连的两个盒子之间的空白，愿望等于两者之和时。如15px + 20px的padding，将得到35px的空白。个人觉得：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段&呼吸距离&。
&html xmlns=&&&&&head&&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&&title&用Margin还是用Padding&/title&&&style&&.top{width:160 height:50 background:#}&.middle{width:160 background:# border-top:1px solid #}&.middle .firstChild{margin-top:20}&.middle .secondChild{margin-top:15}&&/style&&&/head&&&body&&&div class=&top&&&/div&&&div class=&middle&&&& &div class=&firstChild&&我是firstChild，我只是想和我的父元素隔开点距离，这样看起来舒服。&/div&&& &div class=&secondChild&&我要和楼上隔开点的距离。恩，能与底边有点呼吸距离就更好了。&/div&&&/div&&&/body&&&/html&
上面这个效果看起来很不错，达到了我们需要实现的目标。然而，我们细细查看下这个代码，对照下我们上文所说的规则，firstChild用了margin-top:20px来隔开父元素与他的距离，secondChild也用margin-top:15来隔开他与firstChild的距离，咋看之下挺符合我们所说的margin是用来隔开元素与元素的间距。但是他符合我们所说的margin用于布局分开元素使元素与元素互不相干吗？这里我想说的是NO，firstChild同middle属于一种父子元素关系，又是一种包裹元素与内容的关系，他们之间从拟人化的角度来讲，不应该是老逝世不相干的局面。我们再来看我们为什么要让firstChild与他的父元素隔开的距离，从表现的角度上来看，文字与边靠的太近，肯定不。让文字与元素边隔开的距离，既美观，又使得文字有了足够的&呼吸&，方便导语，这恰恰符合padding用于元素与内容之间的间隔让内容（文字）与（包裹）元素之间有个&呼吸距离&。我们再来看，firstChild应用margin-top引发了垂直外边距合并的隐患，middle如果不加一个类似border-top:1px solid #ccc的话标准涉猎器下就会浮现子元素顶了父元素margin隐患可见这个时候margin显然不是很好的选择。我们试着这样来改动：
&html xmlns=&&&&&head&&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&&title&用Margin还是用Padding&/title&&&style&&.top{width:160 height:50 background:#}&.middle_2{width:160 background:# padding:20px 0}&.middle_2 .firstChild{}&.middle_2 .secondChild{margin-top:15}&&/style&&&/head&&&body&&&div class=&top&&&/div&&&div class=&middle_2&&&& &div class=&firstChild&&我是firstChild，我只是想和我的父元素隔开点距离，这样看起来舒服&/div&&& &div class=&secondChild&&我是secondChild，我要和楼上隔开点的距离。恩，能与底边有点呼吸距离就更好了。&/div&&&/div&&&/body&&&/html&
我们来看看这么写的好处吧：1.外观依旧良好，结构清晰也没有破坏布局。2.不会产生垂直外边距合并这样的问题。3.书写规范、代码量减少、重用性好。我们可以看到在middle_2中去除了不需要的border-top，改为更为实用的padding:20px 0，让middle_2中的内容有了足够的&呼吸空间&，以后还可以随时随地改动这个padding，让内容文字的&呼吸空间&增大或者缩小，随时随地只改动一个middle_2的padding就能搞定所有包裹元素与内部内容的规划。请注意这里是父元素使用padding，使得与其内容产生间隙，这是符合我们翻译为&补白&精髓（所以我一直喜爱称padding为&补白&而不是内边距），而padding也恰恰是在这儿最能体检他的价值。这个例子把第一个元素的margin-top去除，在父元素中使用padding。反过来，你会想，既然margin-top不好用，那么我第一个元素用padding-top不是也能达到效果么。恭喜你，你已经前进了一步了，的确应用padding-top即让第一元素与外包裹元素产生了呼吸距离，而且也不会出现所谓的垂直外边距重叠问题， 但是我依旧不推选你这么做。为什么呢？我们来设想这么一个情况吧，假如有一天，你这个模块要产生变动，新需求要删除这个firstChild，调换为otherChild，会怎么样呢？新的需求要求我们新加一个otherChild，调换原来的firstChild：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
分类选择您可能在找这些帮设计师节省1,085,543,232小时