margin-bottomプロパティ

TOPページに戻る > CSS

スポンサード リンク

margin-bottomプロパティ

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

使い方(書式)

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

margin-bottomプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

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

実際の指定方法

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

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

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

html部分

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

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

margin-bottom: 20px;
margin-bottom: 5%;
margin-bottom: auto;




(C)2012 ホームページ作成無料