（Ⅳ）用实例搞定 inline-block | CSS 基本视觉格式化：② “行内盒子”格式化

时间 2020-01-17

标签实例搞定 inline block css 基本视觉格式化盒子栏目 CSS 繁體版

原文原文链接

原创：itsOli  @前端一万小时

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

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

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

🔗紧接上篇文章css

2.5 实例讲解——弄懂 inline-block

2.5.1 ❓问：inline-block 有什么特性？

答：html

既呈现 inline 的特性（不占据一整行，宽度由内容宽度决定）；
又呈现 block 特性（可设置宽高，内外边距）。

2.5.2 ❓问：inline-block 在实际工做中有什么做用？

答：
若是看到页面上有一排并列的按钮，若是不用浮动，就能够用 inline-block。前端

HTML浏览器

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

CSSbash

body {
  text-align: center;
}
.box {
  border: 1px solid;
  width: 100px;
  display: inline-block;
}
复制代码

2.5.3 ❓问：怎么去除上边问题中两个按钮中间的缝隙问题？

答：
之因此有空隙，是由于 HTML 文档里边两个 span 之间有不少空白字符，被浏览器当作一个，故会有空隙。post

解决方式有 2 种：字体

第一种是在 HTML 里边把这个空格去掉（CSS 样式不变）；

HTMLspa

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

CSScode

body {
  text-align: center;
}
.box {
  border: 1px solid;
  width: 100px;
  display: inline-block;
}
复制代码

第二种是把包含两个 span 的 div 字体先设置为 0（这里的空白字符就没有宽度高度，不占位），而后再在 box 里边去设置回去（HTML 不变）。

CSScdn

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

HTML

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

下一篇咱们继续讲解 CSS“行内盒子”格式化相关的知识点。

祝好，qdywxs ♥ you！