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

本文将为大家详细介绍“HTML中行内元素和块级元素的区别有哪些”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“HTML中行内元素和块级元素的区别有哪些”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。

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

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

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

什么是块级元素？

• 总是在新行上开始；

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

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

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

例如：<address>、<center>、<h2>~<h7>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

什么是行内元素？

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

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

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

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

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

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

1）、行内元素

①：设置宽高无效

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

③：不会自动换行

2）、块级元素

①：可以设置宽高

②：设置margin和padding都有效

③：可以自动换行

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

如果你能读到这里，小编希望你对“HTML中行内元素和块级元素的区别有哪些”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注亿速云行业资讯频道！