CSS Display屬性

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

3 Replies to “CSS Display屬性”

  1. 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!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *