（Ⅳ）用實例搞定 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>
複製代碼