背景色、ボーダー、マージン、パディングの設定
ブロックレベル要素は見出し、段落など文書を構成する基本要素となるものです。
ブロックレベル要素の内容モデルには、別のブロック要素やインライン要素を含むことができますが、逆にインライン要素の中にブロックレベル要素を置くことはできません。
ブロックレベル要素は、ブラウザでの表示に際してもひとつの「ブロック（通常改行を伴う表示上のまとまり）」として扱われます。
ブロックの間に空行を置くかどうかは、仕様書には定められておらず、ブラウザやスタイルシートの設定に依存します。
/* == 背景色 == */
blockquote {
background-color ;
#d3d3d3 ; /* LightGray */
/* == ボーダー == */
border-style: solid; /* 実線 */
border-width: 1px 2px 2px 1px;/* 上、右、下、左 の枠線の太さ*/
border-color: #4169E1; /* 枠線の色*/
/* == マージン == */
margin: 1em 2em 10px 4em; /* 上、右、下、左 マージンの幅要素の外側*/
/* == パディング == */
padding: 6px 0 5px 10px;/* 上、右、下、左 要素の内側*/
}
blockquote {
background-color ;
#d3d3d3 ; /* LightGray */
/* == ボーダー == */
border-style: solid; /* 実線 */
border-width: 1px 2px 2px 1px;/* 上、右、下、左 の枠線の太さ*/
border-color: #4169E1; /* 枠線の色*/
/* == マージン == */
margin: 1em 2em 10px 4em; /* 上、右、下、左 マージンの幅要素の外側*/
/* == パディング == */
padding: 6px 0 5px 10px;/* 上、右、下、左 要素の内側*/
}
マージンとインデントの設定
マージンの上と下をフォントの大きさの10%づつあけ、インデントを１文字分とするには次のように定義します。
p {
margin-top : 10%; margin-bottom : 10%;
text-indent : 1em;
}
margin-top : 10%; margin-bottom : 10%;
text-indent : 1em;
}
| Property： | value:値 | 意味 |
|---|---|---|
| width | 要素の幅を指定 | |
| nn | 数値で指定 | |
| % | 割合で指定 | |
| auto | 自動設定 | |
| height | 要素の高さを指定 | |
| nn | 数値で指定 | |
| % | 割合で指定 | |
| auto | 自動設定 | |
| float | ボックスに対する回りこみを指定 | |
| left | ボックスを左に配置 | |
| right | ボックスを右に配置 | |
| none | 回り込みしない | |
| clear | ｆｌｏａｔを解除 | |
| left | 左配置を解除 | |
| right | 右配置を解除 | |
| none | 左右の回り込みを許可する | |
| both | すべて解除 | |
| display | 範囲の表示方法 | |
| block | ブロック要素として表示 | |
| inline | インライン要素として表示 | |
| list-item | リスト型要素として表示 | |
| none | 表示させない | |
| white-space | 空白扱いの指定 | |
| nomal | 標準 | |
| pre | ＜ＰＲＥ＞と同じ | |
| nowrap | ＜ＢＲ＞以外は改行させない |
上へCSS入門
広告