行内元素、行内块元素、块级元素的区别，空元素有哪些

最新推荐文章于 2023-02-15 22:49:58 发布

原创

最新推荐文章于 2023-02-15 22:49:58 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

本文详细介绍了CSS中的行内元素、行内块元素和块级元素的区别，包括各自的特点、宽高属性、margin和padding的应用。同时，还探讨了空元素的概念，列举了一些常见的空元素类型。

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

行内元素：

行内元素也叫内联元素或内嵌元素，只能容纳文本或其他内联元素。常见行内元素有：a、span、b、strong、i、em、s、del、u、ins等。特点如下：

不独占一行，不自动换行
不能设置宽高属性（可以设置line-height指定高度，宽度随内容变化）
margin水平方向有效，垂直方向无效
padding水平方向有效，垂直方向有特殊效果（不是边距效果），具体表现：不影响位置，影响视觉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 100px;
            height: 100px;
            line-height: 200px;
            margin: 100px 200px;
            padding: 300px 100px;
            /* font: normal 700 30px 宋体; */
            font-style: italic;
            font-weight: 700;
            font-size: 30px;
            font-family: 黑体;
        }
    </