margin-topプロパティ

TOPページに戻る > CSS

margin-topプロパティ

要素の枠線の外に余白を指定します
margin-topプロパティを使えば要素の上に余白を作ることができます

使い方（書式）

セレクタ { margin-top: 値; }                                    

margin-topプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
単位	px、emなどの単位
%	パーセンテージで指定。要素が表示できる幅に対しての割合
auto	ブラウザが自動で余白の値を決める

実際の指定方法

.hoge { margin-top: 20px; }    /* 上の余白を20pxに指定  */

.hoge2 { margin-top: 5%; }     /* 上の余白を5%に指定 */

.hoge3 { margin-top: auto; }   /* 上の余白を自動調整 */

.hogebox {border-top: 1px solid #000;}    /* 親boxに上の枠線を表示 */

html部分

<div class="hogebox">
<div class="hoge">margin-top: 20px;</div>
<div class="hoge2">margin-top: 5%;</div>
<div class="hoge3">margin-top: auto;</div>
</div>

実際の表示（わかりやすいように枠線をつけています）