CSS Display屬性

display: block

  • <div><h1>的預設屬性
  • 元素寬度預設填滿寬度,並且會往下掉
  • 排版css支援情況
    • height:支援
    • width:支援
    • margin:支援
    • padding:支援
div block
div block
div block
div block
div block
div
 border: 1px solid #000
 display: block
 height: 50px
 margin: 10px 20px

display: inline

  • <span><a>的預設屬性
  • 不會像block一直往下掉
  • 排版css支援情況
    • height:不支援
    • width:不支援
    • margin:僅支援margin-leftmargin-right
    • padding:僅支援padding-leftpadding-right
div inline
div inline
div inline
div inline
div inline
div
 border: 1px solid #000
 display: inline
 height: 50px
 margin: 10px 20px

display: inline-block

  • <img>預設屬性
  • 元素不會往下掉,會往右排
  • 排版css支援情況
    • height:不支援
    • width:不支援
    • margin:支援
    • padding:支援
div inline-block
div inline-block
div inline-block
div inline-block
div inline-block
div
 border: 1px solid #000
 display: inline-block
 height: 50px
 margin: 10px 20px