display:Inline、Block、Inline-Block

前言

display是用来设置每个元素的排版方式，每种元素都有预设的display。
常见的display有:inline、block、inline-block、flex、grid。
在这边只介绍前三者的差异与用法。

inline

使元素内的文字、图片皆显示在同一行。

▼下方图片是一段文字中间穿插了一个inline元素。

可设定Padding、Margin、但实际上会影响版面的只有水平方向，垂直方向的只有效果并不会影响排版。

padding:10px;

可发现 inline 元素撑开了左右内距
padding top、bottom 则只有覆盖过了上下的文字。

margin:10px;

inline 元素撑开了相邻左右的文字，但上下的行距并没有改变。

设定宽高无效。

width:1000px;
height:1000px;

宽高仍无动於衷XD

无法换行。

多个inline元素排列~

block

元素会以区块的方式呈现

可设定宽高。

设定Padding、Margin 水平、垂直皆会受到影响。

文字可分行。

元素宽度预设占满父元素宽度100%

<div class="parent">
  <div class="child"></div>
</div>

.parent
{
  height:200px;
  width:200px;
  background-color: #A3AADE;
  
}
.child
{
  height:70px;
  background-color: pink;
}

子元素在只有设定height的情况下，width直接填满了父元素的宽~

设定宽度

当我们将宽度设为50px，我们看到的的确是只占了父元素的一半宽度。

width:50px;

下一个元素只会从下一行排列，并不会接在上一个子元素的旁边

<div class="parent">
  
  <div class="child">
    子元素 ?
  </div>
  <div class="child2">
    子元素2 ?
  </div>
  
</div>

inline-block

可设定宽高。

水平、垂直的Padding、Margin皆会作用。

下一个inline、inline-block元素可以直接接在後面不用换行，直至总宽度超过父元素大小才会换行

.parent
{
  width:200px;
}
.child
{
  width:80px;
  display:inline-block;
}
.child2
{
  width:80px;
  display:inline-block;
}

将 child2 宽度改成 150
child1 + child2 宽度 = 80 + 150 > 200
所以child2会换行

.parent
{
  width:200px;
}
.child
{
  width:80px;
  display:inline-block;
}
.child2
{
  width:150px;
  display:inline-block;
}

额外 inline-block的间隙问题

在我们正常排版的情况下，元素间会有间隙
是因为inline-block会把换行以及tab认为是一个空白

<div class="parent">
  
  <div class="child">
    子元素 ?
  </div>
  <div class="child2">
    子元素2?
  </div>
</div>

解决方法

让上一个元素的 ==</ div>== 跟下一个元素的 < div> 黏在一起

<div class="parent">
  <div class="child">
    子元素 ?
  </div><div class="child2">
    子元素2?
  </div>
</div>