ボーダー（border）
border プロパティは、要素の境界線を定義します。値は「幅・スタイル・色」の順で指定します。
コード例
<div style="border: 2px solid red">サンプル</div>
<div style="border: 1px dotted green">サンプル</div>その他の基本プロパティ
height: 要素の高さ（例:100px）width: 要素の幅（例:200px）font-size: 文字サイズ（例:24px）text-align: 水平方向の文字揃え（例:center）line-height: 行の高さ。要素の高さと同じにすると垂直中央揃えになるcolor: 文字色（例:mediumvioletred）font-weight: 文字の太さ（例:bold）
コード例
<div style="
height: 100px;
width: 200px;
font-size: 24px;
text-align: center;
line-height: 100px;
color: mediumvioletred;
font-weight: bold;
border: 1px dotted red;
">テキスト</div>フロート（float）
要素を左または右に浮動配置します。
float: leftfloat: right
コード例
<style>
* { margin: 0; }
</style>
<div style="background-color: red; width: 50%; float: left">左</div>
<div style="background-color: orangered; width: 50%; float: right">右</div>表示形式（display）
| タイプ | 説明 |
|---|---|
| block | 全幅を使用し、前後に改行が入る。常に新しい行から始まる。 |
| inline | 必要な幅のみ使用し、同じ行に他のインライン要素と共存可能。 |
主な display 値:
none: 要素を非表示（レイアウトからも除外）inline: インライン要素として表示block: ブロック要素として表示inline-block: インライン要素のように並ぶが、幅や高さを設定可能
コード例
<span style="display: inline-block; background: orange; height: 100px; width: 100px">ブロック風</span>
<a style="background: orange">リンク</a>マージンとパディング（margin / padding）
外側の余白（margin）と内側の余白（padding）は、上下左右それぞれ個別または一括指定できます。順序は「上・右・下・左」（時計回り）です。
- マージン:
margin-top,margin-right,margin-bottom,margin-left - パディング:
padding-top,padding-right,padding-bottom,padding-left
コード例
<div style="border: 1px solid red; height: 200px; width: 400px; margin: 0 auto">
外側
<div style="border: 1px solid blue; margin: 50px auto; padding-left: 100px; padding-top: 30px">
内側
</div>
</div>