display: block;
改行が入り、縦並び。
display: inline;
改行が入らず、横並び。幅のみ指定可能。
display: inline-block;
改行が入らず、横並び、高さ・幅指定可能。
display: none;
表示されない。
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
p {
display: 値;
background: #eee;
border: dashed 1px #000;
padding: 10px;
margin: 10px;
}
サンプル1
サンプル2
サンプル3
サンプル1
サンプル2
サンプル3
paddingもmarginも左右にのみ有効。
途中で折り返したり、改行を入れるとつぶれる。
サンプル1
サンプル2
サンプル3
サンプル1
サンプル2
サンプル3
サンプル1
サンプル2
サンプル3
paddingもmarginも有効。
途中で折り返したり、改行を入れてもつぶれない。
サンプル1
サンプル2
サンプル3
サンプル1
サンプル2
サンプル3
サンプル1
サンプル2
サンプル3
何も表示されない。設定したcssも無効。
空白を残したい場合はvisibility:hidden;
を使う。
サンプル1
サンプル2
サンプル3
余白部分もリンクが有効になる。