css里边框与边界的区别?

html-css06

css里边框与边界的区别?,第1张

你把这个按钮理解成一个盒子,按钮上的字理解成盒子里的物品,那么:

边界(margin)是盒子相对于外界的距离,比如和另一个盒子的距离,又叫外边距

填充(padding)是盒子内的物品跟盒子之间的距离,又叫内边距

边框(border)是盒子的边,属于盒子的一部分

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

padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象。补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。

何时应当使用margin:

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

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

上下相连的两个盒子之间的空白,需要相互抵消时。如15px +

20px的margin,将得到20px的空白。

何时应当时用padding:

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

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

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

个人认为:margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

英文中,border是边境,有国境线的意思,而boundary是边界,可以指小的很多的东西。 border[英][ˈbɔ:də(r)][美][ˈbɔ:rdə(r)]n.边镶边包边边界vt.&vi.与…接界,在…的边上vt.沿…的边,环绕…,给…镶边vi.近似,毗邻第三人称单数:borders复数:borders 现在进行时:bordering 过去式:bordered 过去分词:bordered双语例句:Why haven't you talked aboutthe border patrol budget before?为什么你以前从来没有提起过关于边境的预算呢?boundary[英][ˈbaʊndri][美][ˈbaʊndəri, -dri]n.分界线范围(球场)边线复数:boundaries双语例句:The boundaries between history and storytelling are always being blurred and muddled.历史和轶闻的分界向来是模糊而混乱的。