block,inline,inline-block 元素的区别是什么?

block元素

  • 占一行,宽度占满整个父元素。可以设置margin,padding,height,width。block元素内可以包括inline元素和block元素,除了p标签只能包含inline元素。
    如 div p ul 等

inline元素

  • 不换行,宽度是由内容决定。只可以设置水平方向上的margin和padding,竖直方向不能设置。
    如 span em strong 等

inline-block元素

  • 不换行,可以设置margin,padding,height,width。由于会产生新的BFC,所以可以设置浮动。
    原文作者:小7丁
    原文地址: https://www.jianshu.com/p/c6063b3f0ef5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞