行内元素和块级元素
行内元素和块级元素
HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过CSS的display属性相互转换。
行内元素#
行内元素对应的CSS样式设置为display: inline;。
特点#
- 元素排在一行
- 封闭后不会自动换行
- 不能指定高度与宽度
- 可以使用
line-height来指定高度 - 外边距对于水平方向有效，垂直方向无效
- 内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响
示例#
<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
<style type="text/css">
span{
width: 1000px; /* 指定宽度无效果 */
height: 1000px; /* 指定高度无效果 */
color: #333;
background: #eee;
padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */
margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
}
</style>
常见行内元素#
<a>、<span>、<b>、<big>、<i>、<small>、<tt>、<abbr>、<acronym>、<cite>、<code>、<dfn>、<em>、<kbd>、<strong>、<samp>、<var>、<bdo>、<br>、 <img>、<iframe>、<map>、<object>、<q>、<script>、<sub>、<sup>、<button>、<input>、<label>、<select>、<textarea>
块级元素#
块级元素对应的CSS样式设置为display: block;。
特点#
- 独占一行
- 封闭后自动换行
- 默认宽度为
100% - 可以指定宽度和高度
- 内外边距对于四个方向有效
示例#
<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
<style type="text/css">
div{
width: 100px; /* 不指定则默认宽度100% */
height: 100px; /* 可以指定高度 */
color: #333;
background: #eee;
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 10px 20px; /* margin的设置在四个方向都有效 */
}
</style>
常见块级元素#
<div>、<address>、<article>、<aside>、<audio>、<blockquote>、<canvas>、<dd>、<dl>、<fieldset>、<figcaption>、<figure>、<footer>、<form>、<h1>~<h6>、<header>、<hgroup>、<hr>、<noscript>、<ol>、<output>、<p>、<pre>、<section>、<table>、<tfoot>、<ul>、<video>
行内块级元素#
行内块级元素对应的CSS样式设置为display: inline-block;。
特点#
- 可以指定宽度和高度
- 内外边距对于四个方向有效
- 元素排在一行，但是会有空白缝隙
示例#
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<style type="text/css">
input{
width: 100px; /* 可以指定宽度 */
height: 100px; /* 可以指定高度 */
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 100px 20px; /* margin的设置在四个方向都有效 */
}
</style>
常见行内块级元素#
<input>、<img>、<button>、<iframe>、<textarea>、<select>
代码示例#
<!DOCTYPE html>
<html>
<head>
<title>行内元素与块级元素</title>
<style type="text/css">
div{
width: 100px; /* 不指定则默认宽度100% */
height: 100px; /* 可以指定高度 */
color: #333;
background: #eee;
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 10px 20px; /* margin的设置在四个方向都有效 */
}
span{
width: 1000px; /* 无法指定宽度 */
height: 1000px; /* 无法指定高度 */
color: #333;
background: #eee;
padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */
margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
}
input{
width: 100px; /* 可以指定宽度 */
height: 100px; /* 可以指定高度 */
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 100px 20px; /* margin的设置在四个方向都有效 */
}
</style>
</head>
<body>
<section>
<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
</section>
<section >
<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
</section>
<section >
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
</section>
</body>
</html>
每日一题#
https://github.com/WindrunnerMax/EveryDay
参考#
https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://blog.csdn.net/zhanglir333/article/details/79178370
https://www.jeffjade.com/2015/06/24/2015-06-24-css-block-inline/
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理