行内元素和块级元素的区别有哪些

区别：行内元素中设置宽高是无效的，不会自动换行；而块级元素可以设置宽高，可以自动换行。行内元素中对margin设置左右方向有效而上下无效，padding设置左右方向有效而上下无效；块级元素中设置margin和padding都有效。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

在css基础当中，我们往往会遇到块元素和行内元素。在实际开发中，会经常把他们弄混淆，而且很难记住。那么行内元素和块级元素的区别有哪些？下面给大家介绍一下。

块级元素和行内元素的定义

什么是块级元素？

• 总是在新行上开始；

• 高度，行高以及外边距和内边距都可控制；

• 宽度缺省是它的容器的100%，除非设定一个宽度。

• 它可以容纳内联元素和其他块元素

例如：address> 、center> 、h1> ~h6> 、hr> 、p> 、PRe> 、ul> 、ol> 、dl> 、table> 、div> 、form>

什么是行内元素？

• 和其他元素都在一行上；

• 高，行高及外边距和内边距不可改变；

• 宽度就是它的文字或图片的宽度，不可改变

• 内联元素只能容纳文本或者其他内联元素

例如：span> 、a> 、br> 、b> 、strong> 、img> 、input> 、textarea> 、select> 、sup> 、sub> 、em> 、del>

【推荐教程：《html视频教程》】

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

1）、行内元素

①：设置宽高无效

②：对margin设置左右方向有效，而上下无效；padding设置左右方向有效，而上下无效。

③：不会自动换行

2）、块级元素

①：可以设置宽高

②：设置margin和padding都有效

③：可以自动换行

④：多个块状，默认排列从上到下

更多编程相关知识，请访问：编程视频！！

以上就是行内元素和块级元素的区别有哪些的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！