display:inline，display:inline-block,display:block是什么？行内元素和块级元素的具体区别是什么？

一，行内元素与块级元素的区别：块级元素会占领页面的一行，其后多个block元素自动换行、可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。ps:常见的块级元素:div,img,ul,form,p等行级元素与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。ps：em，strong，br

文章共1,796字 · 阅读需要大约6分钟

一键AI生成摘要，助你高效阅读

问答

The..Fuir

15913人浏览 · 2022-03-27 22:43:53

The..Fuir · 2022-03-27 22:43:53 发布

一，行内元素与块级元素的区别：

块级元素

会占领页面的一行，其后多个block元素自动换行、可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。

ps:常见的块级元素:div,img,ul,form,p等

行级元素

与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。

ps：em，strong，br,input等

1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。

块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

二、行内元素和块级元素转换

display:block; (字面意思表现形式设为块级元素)

display:inline; (字面意思表现形式设为行内元素)

三、inline-block

inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。

display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

使用inline-block 会产生元素间的空隙:

<!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>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>
<style>

    .child {
      display: inline-block;
      background-color: #04b6fd;
      width: 100px;
      height: 100px;
    }
</style>

空隙产生的原因

在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。

解决方法：

方法一：解决元素之间的空白符将设置有display：inline-block的写到一行

方法二：为父元素中设置font-size: 0，在子元素上重置正确的font-size

方法三：为inline-block元素添加样式float:left

<!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>
</head>
<body>
    <div class="parent">
        <div class="child1">1</div>
        <div class="child2">2</div>
    </div>
</body>
</html>
<style>
    .child1{
      font-size: 30px;
      display: inline-block;
      background-color: #04b6fd;
      width: 100px;
      height: 100px;
      float: left;
    }
    .child2{
      font-size: 30px;
      display: inline-block;
      background-color: #04b6fd;
      width: 100px;
      height: 100px;
      float: left;
    }
</style>

方法四：设置子元素margin值为负数

<!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>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>
<style>
    .child1{
      display: inline-block;
      background-color: #04b6fd;
      width: 100px;
      height: 100px;
    }
    .child2{
      display: inline-block;
      background-color: #04b6fd;
      width: 100px;
      height: 100px;
      margin-left: -6px;
    }
</style>

方法五：最优解在这，设置父元素，display:table和word-spacing

<!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>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>
<style>
    .parent{
        display: table;
        word-spacing:-1em; /*兼容其他浏览器，题主还未验证*/
    }
    .child1{
      display: inline-block;
      background-color: #04b6fd;
      width: 100px;
      height: 100px;
    }
    .child2{
      display: inline-block;
      background-color: #04b6fd;
      width: 100px;
      height: 100px;
    }
</style>