CSS中display:inline和display:inline-block的區別

inline元素

1）可以設置margin-left,padding-left,padding-right,margin-right，不能設置margin-top,padding-top,padding-bottom,margin-bottom。

2）不能設置寬高

3）允許其它元素在其左右

4）在這兒查看其它非常重要的旁注

block元素

1）inline元素能設置和不能設置的屬性，block都能設置

2）在block元素后強制換行

inline-block元素

1）允許其它元素在其左右

2）可以設置margin-top,padding-top,padding-bottom,margin-bottom

3）可以設置寬高

display:block, display:inline, display:inline-block外觀（如下圖）

本文摘自stackoverflow中相關回答

推薦閱讀更多精彩內容

• HTML+CSS(47-72)

  問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...

  _Yfling閱讀 13,786評論 1贊 92
• inline，inline-block和block的區別

  display:inline inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，...

  lixiaochi閱讀 559評論 0贊 1
• CSS

  一 外部式css樣式 (也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css...

  KunMitnic閱讀 956評論 0贊 1
• HTML與CSS基礎

  Html 標簽 斜體 粗體 單獨的樣式 引用文本 長文本引用 換行 空格 分割線 地址信息 單行代碼 多行代碼 無...

  SunnySky_閱讀 563評論 0贊 5
• 薛之謙復合前妻:讓我再愛你一次，從南到北

  1 凌晨四點鐘，薛之謙和前妻高磊鑫前后在微博上曬出一張照片，兩個人并肩牽手走在漫漫黑夜里，微弱的路燈，反射出兩個人...

  丑兒姑娘閱讀 2,140評論 1贊 5