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
Hello everyone, it’s my first pay a visit at this web page, and piece of writing is in fact fruitful designed for me, keep up posting these articles.
Right here is the right website for anyone who wants to understand this
topic. You realize so much its almost tough to argue woth you (not that I personally would want
to…HaHa). You certainly put a fresh spin on a
sybject which has been discussed for a long time.
Excellent stuff, just excellent!
Hi there Dear, are you in fact visiting this site regularly,
if so afterward you will absolutely obtain nice know-how.