Skip to main content

行内元素和块级元素

HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSSdisplay属性相互转换。

行内元素

行内元素对应的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/