总结后清晰了,之前并不清楚行内元素设置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 标签);
- 行内元素不能包含块级元素,行内元素只能容纳文本或者其他行内元素。