行内（内联）元素、块状元素和行内块状元素的区别_什么是块状元素和行内元素-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42216010/article/details/119575304

本文详细介绍了HTML中行内元素、块状元素和行内块状元素的特性，包括它们在布局、尺寸及边距设置上的差异。通过实例展示了各种元素的显示效果，并提供了通过`display`属性进行元素类型转换的方法。内容涵盖HTML基础及CSS布局知识，是理解网页布局和元素交互的关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

行内（内联）元素、块状元素和行内块状元素的区别

行内元素：

和其它元素可以并排；
元素的高度宽度，以及上下边距取决于内容的宽高。

块状元素：

每个块级元素都从新的一行开始，并且其后的元素也另起一行；
元素的宽高，行高以及四周边距都可以人为设置；
元素宽度在不设置的情况下，是他本身父容器的100%（和父元素的宽度一致）。

行内块元素：
综合行内元素和块级元素特点。

内容可以并排；
宽高行高和边距都可以设置。

<html>
<head>
	<style>
    	h1{
        	width:600px;
            height:100px;
            background-color:yellow;
        }
        
    	p{
        	width:500px;
            height:30px;
            background-color:blue;
        }
        div{
        	width:100px;
            height:50px;
            background-color:red;
        }
        ul{
        	width:100px;
            height:50px;
            background-color:green;
        }
    	a{
        	width:100px;
            height:50px;
            background-color:red;
        }
        em{
        	width:1000px;
            height:1000px;
            background-color:green;
        }
    </style>
</head>
<!--行内元素示例-->
<body>
<h1>行内、块状、行内块状元素示例</h1>
<hr/>
<p>行内元素示例</p>
<span>行内元素1</span>
<a>行内元素2</a>
<i>行内元素3</i>
<em>行内元素4</em>
<strong>行内元素5</strong>
<b>行内元素6</b>
</body>
<hr/>
<!--块状元素-->
<body>
<p>块状元素示例</p>
<div>块状元素1</div>
<ul>块状元素2</ul>
<ol>块状元素3</ol>
</body>
<hr/>

<!--行内块元素-->
<body>
<img src="/i/eg_chinarose.jpg"/ alt="图片">
<form action="/demo/demo_form.asp">
账号:<br>
<input type="text" name="账号" value="12345678901">
<br>
密码:<br>
<input type="text" name=密码" value="123456">
<br><br>
<input type="submit" value="登录">
</form> 
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>