display:inline、block、inline-block的区别

1.display:block将元素显示为块级元素

  • 总是在新行上开始
  • 高度，行高以及顶和底边距都可控制
  • 宽度缺省是它的容器的100%，除非设定一个宽度
  • <div> <p> <h1> <form> <ul>和<li>是块元素的例子

2.display:inline将元素显示为行内元素

  • 和其他元素都在一行上
  • 高，行高及顶和底边距不可改变
  • 宽度就是它的文字或图片的宽度，不可改变
  • <span> <a> <label> <input> <img> <strong> 和<em>是inline元素的例子

3.inline-block将块对象作为内联对象呈递

  • 让块元素和其他元素保持在一行上
  • 高度，行高以及顶和底边距都可控制

4.inline和block的转换情景

  • 让一个inline元素从新行开始
  • 让块元素和其他元素保持在一行上
  • 控制inline元素的宽度（对导航条特别有用）
  • 控制inline元素的高度
  • 无须设定宽度即可为一个块元素设定与文字同宽的背景色

参考资料：display:inline、block、inline-block的区别

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容