[CSS] 基本メモ: displayプロパティ – 端くれプログラマの備忘録

block
ブロックボックスを生成する。前後に改行が入る。

inline
インラインボックスを生成する。前後に改行が入らない。高さと幅の設定が効かなくなる。

inline-block
インラインレベルのブロックコンテナを生成する。前後に改行が入らない。高さと幅の設定は効く。

none
表示されない。

サンプル

<style>
#hello1 {
    background-color: yellow;
    border: solid 1px red;
    width: 200px;
    height: 200px;
    display: block;
}
#hello2 {
    background-color: yellow;
    border: solid 1px red;
    width: 200px;
    height: 200px;
    display: inline;
}
#hello3 {
    background-color: yellow;
    border: solid 1px red;
    width: 200px;
    height: 200px;
    display: inline-block;
}
</style>

<style>

#hello1 {

background-color: yellow;

border: solid 1px red;

width: 200px;

height: 200px;

display: block;

}

#hello2 {

background-color: yellow;

border: solid 1px red;

width: 200px;

height: 200px;

display: inline;

}

#hello3 {

background-color: yellow;

border: solid 1px red;

width: 200px;

height: 200px;

display: inline-block;

}

</style>

<div id="hello1">Hello1</div>
<div id="hello2">Hello2</div>
<div id="hello3">Hello3</div>

<div id="hello1">Hello1</div>

<div id="hello2">Hello2</div>

<div id="hello3">Hello3</div>

参考サイト

display－スタイルシートリファレンス
http://www.htmq.com/style/display.shtml

サンプル

参考サイト

関連記事