Question

行内元素和块级元素的区别

Answer 1

举个例子，代码如下
<div id="box">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</div>
给box设置宽度1000px，高度自动。a、b、c这个三个div宽度300px，高度300px。
a、b、c这三个div的宽度加起来比box的宽度还小，然后这三个div块级元素给个都会单独占据一行，不管这一行剩余的空间还能不能容纳其他内容，这一行归我了你们都去下面就是这么霸道，，如图
然后行内元素只会占据本身位置多余的位置不管，我只要我自己的其余的都给你们了，只要父级宽度允许会一直横着排下去，当内容超出时才到下一行，如下图
这是一个最直观的区别，另外还有两个区别就是
行内元素宽高无效及width和height，然后margin和padding的top值和bottom值无效只有left值和right值有效；
最后一个就是块级元素可以包含块级元素和行内元素(内嵌)，但是行内元素不能包含块级元素(内嵌)；
纯手打，望采纳，谢谢！

Answer 2

　　块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

　　行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

　　

　　块级元素可以设置width,height属性.

　　行内元素设置width,height属性无效.

　　块级元素即使设置了宽度,仍然是独占一行.

　　

　　块级元素可以设置margin和padding属性.

　　行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.

　　

　　块级元素对应于display:block.

　　行内元素对应于display:inline.