（Ⅴ）inline-block 在工做中的用法 | CSS 基本视觉格式化：② “行内盒子”格式化

时间 2020-01-17

标签 inline block 用法 css 基本视觉格式化盒子栏目 CSS 繁體版

原文原文链接

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归做者全部，未经受权，请勿转载！

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码

🔗紧接上篇文章css

2.5.4 ❓问：一个页面有一排高度不同的产品图，这时若是咱们用 inline-block，怎样使他们“顶端对齐”？

答：
HTMLhtml

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>前端一万小时</title>
</head>
<body>
  <div class="wrap">
    <span class="box b1">hello，Oli 的前端一万小时</span>
    <span class="box b2">hello，Oli 的前端一万小时</span>
  </div>
</body>
</html>
复制代码

CSS前端

body {
  text-align: center;
}
.wrap {
  font-size: 0;
}
.box {
  border: 1px solid;
  width: 100px;
  display: inline-block;
  font-size: 14px;
}
.b1 {
  padding: 40px;
}
.b2 {
  padding: 10px;
}
复制代码

以上代码会出现如下问题（它会以字的“基线”对齐，而不会以整个框的顶端对齐）：bash

若是想对齐（用 vertical-align 属性）：
CSSpost

body {
  text-align: center;
}
.wrap {
  font-size: 0;
}
.box {
  border: 1px solid;
  width: 100px;
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}
.b1 {
  padding: 40px;
}
.b2 {
  padding: 10px;
}
复制代码

后记： 后续的文章将还会涉及“行内盒子”在实例中的运用，届时咱们还再用代码来阐述本篇的基础理论，眼下不做过多赘述。spa

咱们都要记住一点：理论不懂就实践，实践不会就学理论！code

祝好，qdywxs ♥ you！cdn