Web開発(2)padding_html/css_WEB-ITnoseの伝説のボックスモデル-htmlチュートリアル-php.cn

Web開発(2)padding_html/css_WEB-ITnoseの伝説のボックスモデル

WBOY

リリース： 2016-06-21 08:53:55

オリジナル

999 人が閲覧しました

絶対的なシンプルさ

パディングの導入

前回に続き、CSSスタイルを導入することでHTMLタグの表示形式を変更することができますここで、次の要件があります: div にテキストを書き込み、コードとレンダリング 1 を確認します:

css：div {    width: 300px;    height: 100px;    background-color: cyan;}html：<div>衣带渐宽终不悔，为伊“写”得人憔悴</div>

ログイン後にコピー

1.png のレンダリング

エフェクトは当スタイルと同じです(上が通常表示モード、下が開発モード。主にエフェクトと表示値を区別するため) 動作やエフェクトに問題はありませんので、それでは。 Cha Geer はそれほど退屈なおしゃべりではありません。 div をテキスト編集領域として使用すると、テキストの位置が不当になることに気づきましたか?

一般的に使用されるテキストエディター (レンダリング 2) での書き込みの効果を見てみましょう:

レンダリング 2.png

私たちの言葉それとも、何かを書くとき、ページには常に余白がありますか? テキストは左上と上にありません (不一致の要因が見つかりました)、一部の生徒は、レンダリング 1 には色が変わるのではないかと言うかもしれません。 margin? さて、皆さん注意してください。この白いマージンは body タグのデフォルトであり、今後もブラウザ間で調整とリセットが必要です (以下の内容はここで理解できます)。あまりにも熱心に掘りすぎます）。

繰り返しますが、このマージンは div の本体に対して相対的なものです。混同しないでください。 間の距離です。テキストエリアはです。

ここでは、このセクションの主役である パディング を紹介します。まずコードを次のように変更します:

div {        width: 400px;        height: 100px;        background-color: cyan;        /*添加padding*/        padding: 20px;    }

ログイン後にコピー

レンダリング 3.png

私が使用している開発モードは色の区別が難しいですが、それでも非常に明白です。レンダリング 1 と比較すると、レンダリング 3 では左上に文字が表示されなくなります。レンダリング内の 3div には 2 つのカラー領域があることがわかりました。内側の青い領域は幅と高さの部分で、外側の円はパディング部分です。

ここでパディングの定義を与えることができます。パディングは、テキスト表示領域から境界線までの距離である内側のマージンです。

パディングの使用法

構文: パディング: ピクセル値 1、ピクセル値 2、ピクセル値 3、ピクセル値 4;

パディング最大 4 つのピクセル値、つまり div の周囲に続くことができます。では、続くパラメーター値の数が異なる場合、値を割り当てるにはどうすればよいでしょうか。以下の概要を参照してください。