inline-block的使用

inline-block是什么

  inline和block是css中元素display属性的两个选项,而inline-block可以说是介于两者之间的属性值。
  • inline使元素成为内联元素(inline elements),而block则使之成为块级元素(block elements)。

  • inline元素里面只能放inline元素。 块级元素的特点是独占一行,并能设置width和height属性。

  • 内联元素不会独占行,且设置width和height属性不产生效果。 padding和margin在水平方向的值有效,但在竖直方向无效。

inline-block会让元素像内联元素一样不换行,但里面的内容仍然是块级的。

简单的应用

  • 比如对一些div元素设置成display:inline-block,这样就可以在一行里放置多个div了,相比使用float的优点是不会出现浮动到第二行的元素不会因为第一行有过高的div而导致浮动时被挡住(但是flex布局出现后,一般对div不再设置为display:inline-block了。因为flex的响应式的特点使其更为强大,bootstap也是采用flex布局的)。

  • 更有用的地方,比如对一个a元素进行设置,这样就可以对链接设置高度的同时保持不换行的特性了。

原文地址:https://www.cnblogs.com/benymor/p/6380053.html