CSS布局--inline-block 布局

最新推荐文章于 2022-07-18 14:45:09 发布

codingOrange

最新推荐文章于 2022-07-18 14:45:09 发布

阅读量485

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_43199318/article/details/103830291

版权

本文探讨了CSS布局中inline-block元素间的空白间隙问题，通过实例展示了如何通过调整字体大小和HTML结构来消除这个间隙。文章还预告了将要讨论的其他布局方式，如flex布局、float布局和table布局。

摘要由CSDN通过智能技术生成

布局其实就是想办法怎样将一些元素横向的排列起来，纵向由于块级元素的存在会自动占据一行。

inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行，而且使用 inline-block 元素排列没有清除浮动这样的问题。

但是，使用 inline-block 布局两个元素之间会有一个空白间隙，下面一起来看一下。

html代码

<div class="container">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

css 代码

.container {
   
  width: 800px;

关注

专栏目录