资讯专栏INFORMATION COLUMN

用 margin 还是用 padding ?

zhaofeihao / 3415人阅读

摘要:空白区通常是指其他元素不能出现且父元素背景可见的区域。很自然,用于影响这个区域的属性是。权威指南何时应当使用需要在外侧添加空白时。是用来隔开元素与元素的间距用于布局分开元素使元素与元素互不相干。何时应当时用需要在内测添加空白时。

边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。

补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。

——CSS权威指南

何时应当使用 margin ?

需要在border外侧添加空白时。

空白处不需要背景(色)时。

上下相连的两个盒子之间的空白,需要相互抵消时(如 15px + 20px 的 margin,将得到 20px 的空白)。

margin 是用来隔开元素与元素的间距

margin用于布局分开元素使元素与元素互不相干。

何时应当时用 padding ?

需要在border内测添加空白时。

空白处需要背景(色)时。

上下相连的两个盒子之间的空白,希望等于两者之和时(如 15px + 20px 的 padding,将得到 35px 的空白)。

padding 是用来隔开元素与内容的间隔。

padding 用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

参考资料:http://www.hicss.net/use-marg...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113188.html

相关文章

  • Margin还是Padding?(转载)

    摘要:个人认为是用来隔开元素与元素的间距是用来隔开元素与内容的间隔。举个例子吧用还是用我是,我只是想和我的父元素隔开点距离,这样看起来舒服。转载出自 海玉的博客 本文地址: http://www.hicss.net/use-margin-or-padding/ 用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。 CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对...

    cnTomato 评论0 收藏0
  • margin 还是 padding

    摘要:空白区通常是指其他元素不能出现且父元素背景可见的区域。很自然,用于影响这个区域的属性是。权威指南何时应当使用需要在外侧添加空白时。是用来隔开元素与元素的间距用于布局分开元素使元素与元素互不相干。何时应当时用需要在内测添加空白时。 边界(margin):元素周围生成额外的空白区。空白区通常是指其他元素不能出现且父元素背景可见的区域。补白(padding):补白位于元素框的边界与内容区之间...

    liukai90 评论0 收藏0
  • css魔幻属性跟进篇

    摘要:中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么,可以理解为内联元素没有盒模型,其高度由内容决定。 白话:即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后,这是自己写的第四篇CSS相关的文章,文章绝大部分是自己工作总结得来,另一部分是平日sf回答的与面试中向面试官交流学到的,都是一...

    oogh 评论0 收藏0
  • 【基础】EM 还是 REM?这是一个问题!

    摘要:但问题是究竟该用还是呢关于这个问题一直存在比较大的争议。上述现象的出现,是因为是相对于当前元素字体的大小。什么是表示,它是相对于根元素的长度单位。还是在项目开发中究竟是选用还是一直以来争议不断。这就是前述规则中的第一条规则。 简言 应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM,根据设备尺寸缩放显示元素的大小。这就使得组...

    lk20150415 评论0 收藏0
  • New CSS Logical Properties! - The Next Step of CSS

    摘要:目前为止,支持类似这种多方向网站的最佳方式,依然是使用和变量。在英文网站,宽度属性用表示,高度属性用表示。在英文网站中更多常用于,它的值升级为代替。在英文网站中,物理属性与逻辑属性的表现是一致的。 原文链接:https://medium.com/@elad/new-... 原文作者:Elad Shechter 简介 在过去,大多数程序猿在思考布局时总是习惯于从上下左右的角度出发。这是...

    zhoutao 评论0 收藏0

发表评论

0条评论

zhaofeihao

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<