前提

Webの独学過程でWebサイトの作成をしております。
詰まってしまった部分があるため、この場をお借りして質問させてください。

実現したいこと

ul下にあるliを横並びに表示したいです。項目は１０で仮定しています。

困っていること

CSSでbox-sizing: border-boxを指定しているのに、ボーダーを使用している際としていない際でデザインに変化が起きてしまいます。

コード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<link rel="stylesheet" href="css/style.css">
7</head>
8<body>
9	<ul>
10		<li><a href="#">項目1</a></li>
11		<li><a href="#">項目2</a></li>
12		<li><a href="#">項目3</a></li>
13		<li><a href="#">項目4</a></li>
14		<li><a href="#">項目5</a></li>
15		<li><a href="#">項目6</a></li>
16		<li><a href="#">項目7</a></li>
17		<li><a href="#">項目8</a></li>
18		<li><a href="#">項目9</a></li>
19		<li><a href="#">項目10</a></li>
20	</ul>
21</body>
22</html>

css
1body {
2	-webkit-box-sizing: border-box;
3	-moz-box-sizing: border-box;
4	box-sizing: border-box;
5
6	padding: 0;
7	margin: 0;
8}
9
10ul {
11	font-size: 0;
12}
13
14li {
15	font-size: 1rem;
16	border: 1px solid #000;
17	display: inline-block;
18	width: 10%;
19}

比較画像

ボーダーを指定しない場合

ボーダーを指定する場合

このように、下に項目10がずれてしまいます。

試したこと

検索能力が低く、参考にできる情報を見つけられなかったため、何かを試すことすらできませんでした。　Teratailの皆様の知識をお貸しいただけると幸いです。

環境

macOS Mojave 10.14.6
Firefox 72.0.1
Sublime Text 3 ver3.2.2

行動規範の内容に同意します

回答1件

ベストアンサー

box-sizing: border-box;はbodyタグではなくliタグに入れるといいとおもいます！

li {
    font-size: 1rem;
    border: 1px solid #000;
    display: inline-block;
    width: 10%;
    box-sizing: border-box;
}

投稿2020/01/15 08:39

kaori_oka

総合スコア176

退会済みユーザー

2020/01/15 08:45

ありがとうございます。横並びになりました。しかし項目１の左に少し空白ができてしまいました。これはどうしてでしょうか？

kaori_oka

2020/01/15 08:46

見てみますね！

kaori_oka

2020/01/15 08:49

下記追記してみたらどうなりますか？ ``` ul { font-size: 0; padding: 0; } ```

退会済みユーザー

2020/01/15 08:53

解決しました！ありがとうございます！ただ質問ばかりで申し訳ないのですが、bodyにborder-boxを指定した場合とliにborder-boxを指定した場合の挙動に差異があるのはどういった理由からでしょうか？自分の認識だとbodyに指定したプロパティはその子要素全てに適応される、という認識なので、理解ができません。よろしければご教授いただけると幸いです。宜しくお願いします。

kaori_oka

2020/01/15 08:55

調べてみますね！

thyda.eiqau

2020/01/15 09:23

「自分の認識だとbodyに指定したプロパティはその子要素全てに適応される」という認識が間違っています。box-sizingは継承しない (子要素で指定しなかった場合に親要素の値を参照しない) プロパティですので、liにbox-sizingを指定しない場合は li { box-sizing: content-box; } として解釈されます。 - https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing#Specifications 継承についてはこちら - https://developer.mozilla.org/ja/docs/Web/CSS/inheritance

kaori_oka

2020/01/15 09:29

下記のようにしたら子要素すべてにかかるようですね。 bodyのstyle適用は別にする必要があるようですが。 ``` ▼bodyのみに適用 body { box-sizing: border-box; } ▼body内の要素に適用 body * { box-sizing: border-box; } ``` 参考記事：https://dekiru.net/article/13014/

退会済みユーザー

2020/01/17 08:30

thyda.eiqauさん、kaori_okaさん　ありがとうございます！疑問が解決しました！

行動規範の内容に同意します