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阅读 14,680评论 1赞 92
  • inline，inline-block和block的区别
    display:inline inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，...
    lixiaochi阅读 3,658评论 0赞 1
  • CSS
    一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css...
    KunMitnic阅读 4,544评论 0赞 1
  • HTML与CSS基础
    Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 3,567评论 0赞 5
  • 薛之谦复合前妻:让我再爱你一次，从南到北
    1 凌晨四点钟，薛之谦和前妻高磊鑫前后在微博上晒出一张照片，两个人并肩牵手走在漫漫黑夜里，微弱的路灯，反射出两个人...
    丑儿姑娘阅读 6,678评论 1赞 5