端くれプログラマの備忘録 CSS [CSS] 基本メモ: ブロック要素

[CSS] 基本メモ: ブロック要素

 ブロック要素のスタイル

width: 200px | 50%; (パーセントは親要素に対する比率)
height: 200px | 50%;
 
border-color: red;
border-width: 1px;
border-style: solid | dashed | dotted | double | inset | outset;
 
//borderの内側がpadding
padding: 10px; //数値1個 → (上下左右)
padding: 10px 10px; //数値2個 → (上下) (左右)
padding: 10px 10px 10px; //数値3個 → (上) (左右) (下)
padding: 10px 10px 10px 10px; //数値4個 → (上) (右) (下) (左)
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
 
//borderの外側がmargin
margin: 10px; //数値1個 → (上下左右)
margin: 10px 10px; //数値2個 → (上下) (左右)
margin: 10px 10px 10px; //数値3個 → (上) (左右) (下)
margin: 10px 10px 10px 10px; //数値4個 → (上) (右) (下) (左)
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

参考サイト

スタイルシートリファレンス(目的別)
http://www.htmq.com/style/index.shtml