block

• 預設屬性
• 一個一個排列下來
• border：超長條
• margin:：上下左右皆可調整

<ul>
 <li class="block">block</li>
 <li class="block">block</li>
 <li class="block">block</li>
 <li class="block">block</li>
</ul>

.block{
 display: block;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

• inline
• inline
• inline
• inline

inline

• 所有元素排在同一行
• border：合身包覆内文
• margin：只能動左右，無法動上下

<ul>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
</ul>

.inline{
 display: inline;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

• inline
• inline
• inline
• inline

inline-block

• 所有元素排在同一行
• border：合身包覆内文
• margin：上下左右皆可調整

<ul>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
</ul>

.inline-block{
 display: inline-block;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

• inline-block
• inline-block
• inline-block
• inline-block