【HTML】行内和块级元素

最新推荐文章于 2025-12-31 14:00:00 发布

原创最新推荐文章于 2025-12-31 14:00:00 发布 · 143 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了HTML中的行内元素与块级元素的区别，包括它们的特性、应用场景及如何通过CSS进行样式调整。重点介绍了行内元素如<a>、<img>和块级元素如<div>、<p>的使用，并通过实例展示了margin和padding属性在不同类型元素上的表现。

1、行内，块级（含义）

行内元素：

行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。
举例：
<a>标签可定义锚
<b>字体bai加粗
<br>换行
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像输入框
<input> 元素定义标注（标记）
<span>组合文档中的行内元素
<label>标签为

块级元素：

块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。
举例：
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<form>创建 HTML 表单
<h1>定义最大的标题
<h2><h3><h4><h5>
<h6>定义最小的标题

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

块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，
一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效
（注意，块级元素设置了width宽度属性后仍然是独占一行的）
块级元素可以设置margin,padding属性
行内元素：对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

 <div class="con1"></div>
 <span>123</span>

.con1{
      width: 100px;
      height: 100px;
      background: darkcyan;
      margin: 10px 10px;
      padding:10px 10px;
    }
span{
      width: 100px;
      height: 100px;
      margin: 20px 20px;
      /* margin改变上下没有用，左右可以改变 */
      padding:20px 20px;
      /* padding改变上下左右都有用 */
      background: darkorange;
    }

这里还有一个需要注意的是，input框和img便签，这些t属于行内替换元素，因为上面上到：行内元素对margin仅设置左右方向有效，上下无效，但看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行内元素设置外边距</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    span{
      width: 100px;
      height: 100px;
      margin: 20px 20px;
   /* margin的上下没有用，左右可以改变  */
     padding:20px 20px; 
       /* padding的上下左右都有yong  */
      background: darkorange; 
     } 
    input{
      background: cornflowerblue;
      border: 1px solid #dddddd;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-right: 10px;
      padding-left: 10px;
      margin-top: 10px;
      margin-bottom:10px;
      margin-left:10px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <input type="text" class="con">
  <input type="text" class="con">
  <span>123</span>
  <span>234</span> 
</body>
</html>