###前提・実現したいこと
HTMLの勉強中、 display:blockとdisplay:inlineのちがいがわからず困ってしまいました。

###例 ※下記手本を見ながら学んでいるときにうまく理解できませんでした

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

###現在の理解
・inlineの場合上下のpaddingができない

全くの初歩的な質問ですが、ご回答いただけますと幸いです。

kei344

2017/01/22 02:12

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

bigin

2017/01/24 03:47

ありがとうございます。初めてでうまくできずに、、、修正させていただきました。

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

回答2件

ベストアンサー

こんなところではないでしょうか。

display: blockの場合

width(横幅)とheight(高さ)が指定できる。
margin, paddingを上下左右に指定できる。
vertical-alignが指定できない。
ブロック要素の前後に改行が入るので、積み重なるように配置されていく。

display:inlineの場合

width(横幅)とheight(高さ)は指定できない。
marginが上下に指定できない(左右には指定できる)。
paddingは上下左右にかけることができる。
要素の前後に改行が入らないので、横にどんどん追加されていく(ただし、画面の端までくるとそこで改行される)。
ブロック要素の中に配置できる(インライン要素にブロック要素を配置することはできない)。

投稿2017/01/21 15:14

s8_chu

総合スコア14731

bigin

2017/01/22 01:24

分かりやすく要点を得たご回答ありがとうございますm(__)m

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

inlineの場合上下のpaddingができない

その通りです。
正確に言いますと、上下のpaddingは指定できるものの、上下の行の間隔には影響しません。
（なぜかと言われると答えに窮するのですが…。上下の行間はline-heightで指定するので、それに更にpaddingが影響するとややこしいからでしょうか。）
また、width、height、上下のmarginも効きません。

インラインの中で上下のpaddingを確保したボックスを入れたい場合、display: inline-block; を使うといいです。
（inline-block の説明もなかなか難しいのですが、簡易的な説明としては、<img>のような外から干渉されない要素を行中に埋め込んでいるイメージです。）

html
1<style>
2span.hoge {
3	display: inline-block;
4	padding: 10px;
5	border: 10px solid red;
6}
7</style>
8<div>ああああああああああああ</div>
9<div>あああ<span class="hoge">いいい</span>あああ</div>
10<div>ああああああああああああ</div>