CSSスタイルシートによる余白の設定【マージン・パディング】

マージン margin

パディング padding

 要素内容 

ボーダー




要素ボックス余白には外側の余白マージン」(margin)と内側の余白パディング」(padding)があります。

【外側の余白・マージンの設定】

marginプロパティの種類

margin:値

margin-top:値

margin-right:値

margin-bottom:値

margin-left:値


これらのプロパティは全ての要素に使用することができます。
また、余白の指定は子要素へは継承されません。

値には数値と単位、または%パーセント、「auto」を使用します。

パーセントは親要素との相対指定、autoは自動調整になります。

「margin:値」は周り全ての余白を同じ設定で指定します。
topは上余白、rightは右余白、bottomは下余白、leftは左余白、をそれぞれ指定する時に使います。

※外側余白には負の値も指定することができます。




【内側の余白・パディングの設定】

paddingプロパティの種類

padding:値

padding-top:値

padding-right:値

padding-bottom:値

padding-left:値


これらのプロパティは全ての要素に使用することができます。
また、余白の指定は子要素へは継承されません。

値には数値と単位、または%パーセントを使用します。

パーセントは親要素との相対指定です。

「padding:値」は内側全ての余白を同じ設定で指定します。
topは上余白、rightは右余白、bottomは下余白、leftは左余白、をそれぞれ指定する時に使います。

※内側余白には値に「auto」、負の値を指定することは出来ません。




【余白を一括指定するやり方】

marginとpaddingプロパティは上下左右の余白の値を一括指定することが出来ます。

ここではmarginプロパティを使って説明します。

@「上下」「左右」が違う値だった場合
(上下が10px 左右が20pxの場合)

margin:10px 23px

A上、左と右、下が違う値だった場合
(上が10px 左右が20px 下が30pxの場合)

margin:10px 20px 30px

B上下左右全て違う値だった場合
(上10px 下20px 左30px 右40px)

margin:10px 40px 20px 30px



※注意しなくてはならないのはBの順番です。

上、右、下、左の順で記述します。『時計回り


カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。