前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >理解inline元素的盒模型

理解inline元素的盒模型

作者头像
lesM10
发布2019-08-26 16:34:35
6920
发布2019-08-26 16:34:35
举报
文章被收录于专栏:自译文章/自学记录

在网页中,每个元素都是作为矩形盒被描绘/渲染的。盒模型描述了元素的content,padding,border,margin是如何决定元素所占据的空间,也描述了它和页面中其它元素的关系。

根据元素的display属性,元素的box分为2类:block box和inline box。盒模型被应用于这2类时,有所不同。在这片文章中我们会看到盒模型是如何被应用于inline box。

inline盒和line盒

inline box被水平放置在line box中。

如果在一行中容纳不下所有的元素,就在第一个line box的下一行创建一个新的line box。因此一个单独的inline元素就被2行分割开(如下图所示)

inline box的盒模型

当一个inline box被多行分割后,它在逻辑上仍然是一个单独的box。这就意味着任何水平的padding,border,margin仅仅应用于被box占据的首行和末行。

例如,下图中高亮的span被2行分割。它的水平padding不适用首行的末尾和第二行的开始。

当然,元素垂直方向上的padding, border, margin不会推开在它上下的元素。

不过要注意,垂直方向的padding, border也被应用了,并且padding也推开了border。

如果你需要调整行与行之间的高度,可是使用line-height代替。

用devtools审查inline box

当debug布局问题时,拥有一个能给你完整图画的工具是非常重要的。其中一个就是highlighter,所有的浏览器的devtools中都包含了它。你可以使用它选择元素作仔细的审查,highlighter也给你提供了布局方面的信息。

在上面的例子中,highlighter被用来高亮一个被多行分割的inline元素。Highligh显示了帮你对齐元素的指导,给出了节点的尺寸并且展示了盒模型的轮廓。从火狐39开始,被分割的inline元素的盒模型轮廓展示了被元素占据的每一行。在这个例子中,内容区域以淡蓝色显示并被分为4行。节点也定义了右padding,并且highlighter以紫色展示padding区域。高亮每个单独的line box对于理解盒模型是如何被应用于inline元素是非常重要的,而且也帮你检查了行间的距离和inline box的垂直对齐。

本文来源:https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.05.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • inline盒和line盒
  • inline box的盒模型
  • 用devtools审查inline box
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档