行内元素 vs 块级元素

191 阅读1分钟

总结后清晰了,之前并不清楚行内元素设置margin或padding时的 上下无效 这一情形。

由两种元素想到了【层叠上下文】这一概念,推荐张鑫旭大佬的文章深入理解CSS中的层叠上下文和层叠顺序

【引子】为什么内联元素的层叠顺序要比浮动元素和块状元素都高?明明感觉浮动元素和块状元素要更拽

行内元素

a, span, label, strong, em, br, img, input, select, textarea, cite,

块级元素

div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset

区别:

是否独占一行?默认宽度怎么确定?

  • 块级元素会独占一行,垂直方向排列,其宽度自动填满其父元素宽度;
  • 行内元素不会独占一行,相邻的行内元素会排列在同一行里,水平方向排列,直到一行排不下,才会换行,其宽度随元素的内容而变化。

能否设置 width/heihgt?

  • 块级元素可以设置 width,height 属性【注意:块级元素即使设置了宽度,仍然是独占一行的】;
  • 行内元素设置 width, height 无效(可以设置 line-height),宽度只与内容有关。

能否设置 margin 和 padding?

  • 块级元素可以设置 margin 和 padding;
  • 行内元素的 margin 和 padding 水平方向有效,竖直方向无效,即上下无效。

能否任意嵌套?

  • 块级元素可以包含行内元素和块级元素(p 标签中不能嵌套 div 标签);
  • 行内元素不能包含块级元素,行内元素只能容纳文本或者其他行内元素。