内联与块级标签有何区别？

[问答题]

内联与块级标签有何区别？

安如水

一，行内元素与块级元素的区别：

1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。

块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

二、行内元素和块级元素转换

display:block; (字面意思表现形式设为块级元素)

display:inline; (字面意思表现形式设为行内元素)

三、inline-block

inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。

HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。

发表于 2019-07-19 13:45:33 回复(1)

牛客2400533号

这个答案没毛病，是这个意思～

发表于 2017-09-05 12:14:02 回复(0)

一只大恐龙

这个答案我给满分哈哈哈哈哈哈

发表于 2017-08-30 20:25:26 回复(0)

马月月

这个是H5之前的划分方法，这题的参考答案很棒（手动滑稽），主要区别在于，行内元素不独占一行，设置宽度和高度无效，垂直方向上的margin，padding设置无效。

发表于 2017-03-23 08:41:02 回复(3)

骄傲一个婷670

块级标签：宽度和内容有关
1）每一个块级标签独占一行，可以实现自动换行
2）有多个块级标签存在时，默认的排列方式从上往下
3）设置宽高有效
4）可以容纳内联元素或者其他元素

内联标签：内联标签在不设置宽度的情况下，宽度始终和浏览器宽度保持一致
1）不会自动换行
2）出现多个内联标签时，默认的排列方式是从左往右
3）设置宽高无效
4）只能容纳内联元素

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

块级元素	行内元素
独占一行,默认情况下，其宽度自动填满其父元素宽度	相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以设置width，height属性	行内元素设置width，height属性无效
可以设置margin和padding属性	行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
对应于display:block	对应于display:inline；