inline-block和block的区别

明月几时有666

已于 2022-02-24 19:05:59 修改

阅读量5.8k

点赞数 12

分类专栏： # CSS 文章标签： inline-block block inline

于 2022-02-24 17:26:16 首次发布

本文链接：https://blog.csdn.net/gao_zhennan/article/details/123116722

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、块级元素和内联（行内）元素的特点

块级元素

1. 独占一行

2. 可以设置属性：width、height、margin-top和margin-bottom

内联元素

1. 多个元素在一行显示

2. 设置属性：width、height、margin-top、margin-bottom无效

补充：对于border、padding、margin-left、margin-right块级元素和内联元素设置后都有效，所以以上的区别中写的是width、height、margin的垂直方向设置margin-top、margin-bottom。

了解内容：以下是HTML中的所有块级元素：

<address>

联系方式信息。

<article> HTML5

文章内容。

<aside> HTML5

伴随内容。

<blockquote>

块引用。

<dd>

定义列表中定义条目描述。

<div>

文档分区。

<dl>

定义列表。

<fieldset>

表单元素分组。

<figcaption> HTML5

图文信息组标题

<figure> HTML5

图文信息组 (参照 <figcaption>)。

<footer> HTML5

区段尾或页尾。

<form>

表单。

<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)

标题级别 1-6.

<header> HTML5

区段头或页头。

<hgroup> HTML5

标题组。

<hr>

水平分割线。

<ol>

有序列表。

<p>

行。

<pre>

预格式化文本。

<section> HTML5

一个页面区段。

<table>

表格。

<ul>

无序列表。

二、 display属性

display 属性可以设置元素外部显示类型元素的外部显示类型将决定该元素在流式布局中的表现。

（注意：设置块级元素的外部显示类型display：inline;不是把块级元素变成了内联元素，它本身还是块级元素（见上文所有的块级元素），只是它具备了内联元素的显示特点。

那么外部显示类型display: inline-block; 的显示特点是什么呢？从名字上看，它应该是具备了块级和内联元素的特点，没错，它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点

display: inline代码及显示效果

这里我使用了内联元素span，其display默认值是inline。因此，不需要我显示的指定该值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display: inline</title>

    <style>
        span {
            width: 50px;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: red;
        }

        div {
            background-color: yellow;
        }
    </style>

</head>
<body>
   <div>
       <span>Hello HTML</span>
       <span>Hello HTML</span>
       <span>Hello HTML</span>
   </div>
</body>
</html>

如图所示，满足了内联元素的特点：多个元素在一行显示，设置属性：width、height、margin-top、margin-bottom无效
在这里插入图片描述

display: block代码及显示效果

仅仅将span替换为了p元素，样式设置没变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display: block</title>

    <style>
        p {
            width: 50px;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: red;
        }

        div {
            background-color: yellow;
        }
    </style>

</head>
<body>
   <div>
        <p>hello HTML</p>
        <p>hello HTML</p>
        <p>hello HTML</p>
   </div>
</body>
</html>

如图所示，满足了块级元素的特点：每个元素独占一行，设置属性：width、height、margin-top、margin-bottom有效
在这里插入图片描述

display: inline-block 用于内联元素

这里我对span元素的样式添加了display: inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display: inline</title>

    <style>
        span {
			/*添加display: inline-block;*/
			display: inline-block;
			
            width: 50px;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: red;
        }

        div {
            background-color: yellow;
        }
    </style>

</head>
<body>
   <div>
       <span>Hello HTML</span>
       <span>Hello HTML</span>
       <span>Hello HTML</span>
   </div>
</body>
</html>

如图所示：它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display: block</title>

    <style>
        p {
			display: inline-block;
			
            width: 50px;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: red;
        }

        div {
            background-color: yellow;
        }
    </style>

</head>
<body>
   <div>
        <p>hello HTML</p>
        <p>hello HTML</p>
        <p>hello HTML</p>
   </div>
</body>
</html>

display: inline-block 用于块级元素

这里我对p元素的样式添加了display: inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display: inline-block</title>

    <style>
        p {
			/*添加display: inline-block;*/
			display: inline-block;
			
            width: 50px;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: red;
        }

        div {
            background-color: yellow;
        }
    </style>

</head>
<body>
   <div>
      <p>hello HTML</p>
      <p>hello HTML</p>
      <p>hello HTML</p>
   </div>
</body>
</html>