[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>

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

参考サイト

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