HTML中行内元素和块级元素的区别及转换

Question

如题所述

Answer 1

最明显的区别就是：块级元素会自动换行，而行内元素不会自动换行。
行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。

Answer 2

块状元素特点：

独占一行，在默认情况下，宽度自动填满父元素宽度

宽度和高度可以控制

margin和padding横向纵向设置都有效

可以通过display: inline; 转换为行内元素

除个别特殊元素外，可包含块状元素和行内元素

行内元素特点：

不能独占一行

宽高由内容撑开

margin和padding横向设置有效，纵向设置不产生边距效果

可以通过display: block; 转换为块状元素

除ins和del外，不能包含块状元素

资料来源于：HTML5学堂

关于HTML+CSS+JavaScript的知识，推荐你去看看HTML5学堂。

Answer 3

区别可以去找 “html文档流”相关的资料去学习，最主要的区别就是元素是占据一行还是挤在一行

转换的方式是用css的display属性

display:block; /*转换为块级*/
display:inline; /*转换为行内*/

还有一种是
display:inline-block; /* 其实仍未行内元素，但是可以设置width及height属性等*/本回答被提问者和网友采纳

Answer 4

display：inline-block；