要素の表示形式を変更するdisplayプロパティ

2015年6月22日

要素にはブロックレベル要素とインラインレベル要素というものが
あります。

サンプルプログラムを実行して頂ければわかるかと
思いますが、文章の途中で<img>タグを入れた文章ですが、
表示が異なっています。

代表的な値を書き留めておきます。

値	説明
none	指定した要素とそこに含まれる子要素をすべて表示しない。要素分の空白もなし。
block	ブロックレベル要素になる。
inline	インライン要素になる。
inline-block	インラインレベル要素で表示されますが、ブロックレベル要素のように高さ、幅を設定できる。
list-item	指定した要素がリスト要素になる。li関連プロパティを使えるようになる。

    *{margin:0;padding:0;}
    
    #container{
        width:400px;
        height:400px;
        background-color:#f0f0f0;
        margin:0 auto;
    }

*{margin:0;padding:0;}

#container{

width:400px;

height:400px;

background-color:#f0f0f0;

margin:0 auto;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div id="container">
        <div>
            <p>こうやって<img src="neko" width="50" height="50" alt="" >
                画像を表示します。</p>
            </div>
        <div>
            <p >ブロック要素にすると<img style="display:block;" src="neko" width="50" height="50" alt="" >
                こうなります。</p>
        </div>
    </div>
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

<div>

<p>こうやって<img src="neko" width="50" height="50" alt="" >

画像を表示します。</p>

</div>

<div>

<p >ブロック要素にすると<img style="display:block;" src="neko" width="50" height="50" alt="" >

こうなります。</p>

</div>

</body>

</html>

img要素は元はインライン要素なので、コンテンツの途中に書いたとき
ブラウザの表示のように改行されずにテキストが表示されます。

ですが、２つの目の文でimgにdisplay:blockを設定して
ブロック要素に変更しています。そのために画像とテキストの間に
改行が入ります。