背景 div にはパディングがあります。 CSSでインデントするにはどうすればいいですか？ ブロックプロパティを管理するための詳細オプション
どの Web ページもその上に配置された要素で構成されており、ほとんどの場合、div ブロックのレイアウトがその配置に影響します。 もちろんタグを使ったテーブルレイアウトもあります
| 、ブロックベースとテーブルベースのどちらのシステムを使用するのが良いかという議論さえあります。 しかし、実際には、現時点では、表形式のレイアウトのみを使用する、人気があり便利な最新のサイトは見つかりません。 せいぜい、それが意図されている目的、つまりテーブルを作成するためにのみ使用され、サイト構造自体を形成するためには使用されません。
実際、サイトの div レイアウトでは、テーブルでは使用できない多くの CSS プロパティを設定できます。 さらに、テーブル システムの最大の欠点は、テーブルがブラウザに完全に読み込まれるまで画面に表示されないことです。 サイト全体がテーブルで作成されている場合、ページの HTML コード全体が完全に読み込まれた後にのみディスプレイに表示されます。 DIVタグとfloatプロパティブロックシステムの基本はタグです 、コンテンツのコンテナーです。 内部に他のコンテナが含まれる場合もあります .DIV タグの使用は、 と同じくらい難しいものではありません。 原則として、標準的なサイト構造は次のように形成されます。 メインコンテナーがあります。 (多くの場合、ラッパー、コンテナ、メインなどと呼ばれるクラスが割り当てられます)。 このコンテナ内には、メニュー、コンテンツ部分、サイドバーのブロックがあります。
デフォルトでは、新しいブロックはそれぞれ次のように配置されます。 改行。 ブロックを別のブロックの左側または右側に配置するには (たとえば、サイドバーを右側に配置するには)、次を使用します。 float プロパティ。 デフォルトでは値は「none」ですが、「left」と「right」の値を設定することもできます。 2 つのブロックの例を使用して、このプロパティを見てみましょう。
コンテンツブロック
サイドバーブロック
このコードは次の結果を返します。 明確なプロパティfloat プロパティは、それが登録されているブロック自体に適用されるだけでなく、このブロックに続く後続の要素にも適用されることを考慮することが重要です。 つまり、プロパティを何も指定せずに、上記の 2 つのブロックに別のブロックを追加すると、そのブロックは新しい行に配置されず、2 番目のブロックの右側から開始されます。 これを避けるために、ブロック div レイアウトでは、新しい行に配置するブロックに設定する必要がある clear プロパティを使用します。 ほとんどの場合、これは「両方」に設定されますが、ブロックを新しい行に配置するだけでなく、その配置も設定したい場合は、「左」または「右」に設定することもできます。 上の例に新しい要素を追加してみましょう。
コンテンツブロック
サイドバーブロック
新しいブロックは以下にあります
結果：
ブロックレイアウトのインデントブロックの位置に加えて、ブロック間とブロック内の両方にインデントを設定することが重要です。 このために、マージンとパディングのプロパティがそれぞれ使用されます。 インデントは要素の上下左右に分けて設定されます。 これらは 4 つの値をリストすることで 1 行で指定できます。 マージン: 20px 10px 0 40px これらのパラメータを持つブロックは、親要素の 20 ピクセル下、右側の要素から 10 ピクセルの位置に配置され、下部のパディングはゼロ、左側は 40 ピクセルのパディングになります。 すべて同じインジケーターがパディング プロパティで指定されている場合、これらは、コンテンツが配置されているブロックの境界に関連したコンテンツの内部パディングになります。 また、margin-top、margin-bottom、margin-left、margin-right (パディングについても同様) を使用して、個々のエッジに個別のプロパティを設定することもできます。 この場合、エッジのいずれかが指定されていない場合、その側のインデントはゼロになるか、ページ上のブロックに指定された一般的な CSS プロパティによって決定されます。
ブロックレイアウトはWebサイトやブログを作成するときによく使用されます。 この結果、多くの場合、ブロックをインデントする必要があります。 このため、約 CSSでインデントを付ける方法このレッスンで詳しく説明します。 ブラウザにとって、各タグは、コンテンツ、パディング、外側のマージン、境界線を含むコンテナーです。 このレッスンでは、内部および外部のインデントを作成する方法を学び、その主なパラメーターについて検討します。 以下の図は、ブロック インデント パラメーターを明確に示しています。 ご覧のとおり、インデントは、上インデント (上)、下インデント (下)、左インデント (左)、右インデント (右) の 4 方向に作成できます。 測定単位には、ピクセル、パーセンテージ、その他の CSS 単位を使用できます。詳細については、こちらをご覧ください。 このチュートリアルではピクセルを使用します。 ブロックパディングCSS のパディングを担当するプロパティは次のとおりです。 パディング。 それでは、ブロックの内部パディングを設定する例を見てみましょう。 パディングトップ: 5px; /*上のパディング*/padding-left: 8px; /*左パディング*/ パディング右: 8px; /*右パディング*/padding-bottom: 5px; /*下部のパディング*/ この例では、パディングはブロックの両側に個別に設定されます。 さらに、CSS でインデントを設定するにはいくつかの方法があります。 マージン: 5px 8px 5px 8px; /*上、右、下、左のマージン*/ margin: 5px 8px 5px; /*上、左、右、下のマージンを説明します*/ margin: 5px 8px; /*上下左右のマージンを記述します*/ margin: 7px; /*すべての 7px パディングを説明します*/ 最初のほうが覚えやすいし、 最後の方法。 前者の場合、インデントは時計回り (上、右、下、左) に配置されます。後者の場合、インデントの量は任意に指定できます。後者の場合、すべての面のインデントが同じになります。 ブロックマージンCSS のマージンを担当するプロパティは次のとおりです。 マージン。 CSS のマージンの例: マージントップ: 5px; /*上マージン*/ margin-left: 10px; /*左マージン*/マージン-右: 10px; /*右マージン*/ margin-bottom: 5px; /*下マージン*/ パディング: 5px 10px 5px 10px; /*上、右、下、左のマージン*/ パディング: 5px 10px 5px; /*上、左、右、下のパディングを説明します*/padding: 5px 10px; /*上下左右のパディングを記述します*/padding: 7px; /*すべての 7 ピクセルのマージンを説明します*/ したがって、 CSSでインデントを付ける方法- 質問は難しくありませんが、非常に関連性があります。 上記の情報をよりよく理解するには、パディング - 内部インデントとマージン - 外部インデントの 2 つのプロパティがあることを覚えておく必要があります。 また、すでにご存知のとおり、インデントを設定するにはいくつかの方法があり、それらを使用できます。 レイアウト設計者は、特定の状況で余分なインデントが存在するために、ページ上に要素を配置する際に問題に遭遇することがよくあります。 この記事では、ブロック内に画像が配置され、不明なインデントが発生する場合について検討します。 ここでは、この問題の説明と解決策を説明します。 通常の生活と同様、レイアウトにも説明が難しい異常な状況が発生します。 これはまさに、次のプロパティを持つコンテナに画像挿入タグ (img) が挿入されたときに発生する可能性のある状況です。 ブロック要素または浮遊物体。 この状況の混乱は、画像の下に表示される理解できないくぼみにあります。 実際の例を見てみましょうしたがって、問題を明確にし、よりよく理解するために、すべてを見て、いわば実際に「触れる」ことを提案します。 任意の画像を取得して div に置きます。 以下にコード例を示します。 HTML < div> < img src= "img.png" width= "250px" alt= "" /> スタイルを作成するときは、ブロックの内側の背景を塗りつぶします。 赤で。 通常の状態では、画像はブロック内のスペース全体を完全に占め、赤い背景を覆います。 登録用のコードを書きます div ( display: block; width: 250px; margin: 0px auto; /*ブロックを中央に配置*/ 背景: #ff0000;/*ブロックを赤色で塗りつぶし、パディングを視覚化するため*/ ) body (background: #eee; ) その結果、ブラウザには次の画像が表示されます。
容器の底の赤い縞模様から判断すると、理解できない凹みが発生していると言えます。 ブラウザのウェブマスター パネルを使用すると、インデントが 5,511 ピクセルであることが判明しました。 すべての人気のあるブラウザにこのバグがあるのは非常に面白いことですが、誰もがお気に入りの Internet Explowed はこの場合でも問題なく動作します。 インデントの理由高度な技術教育を受けた者として、何も起こらずに起こることはなく、すべてには理由があると断言できます。 この問題を調べてみて、私は改めてそう確信しました。 混乱全体は、要素の標準プロパティにあります。 デフォルトでは、img タグにはインライン要素プロパティがあり、これは要素がテキストのベースラインに揃えられることを意味します。 テキスト用の必須のマージン、つまり文字の「尾」用のスペースがあるため、この行はブロックの下端のすぐ上に配置されます。 問題の解決この小さな欠陥を修正するには、ブロック要素のプロパティを画像に割り当てるだけで十分です。 これを行うには、表示プロパティを画像に割り当てます。 表示: ブロック; そして不要な問題を排除します。 また、vertical-align プロパティを使用して垂直方向の配置を有効にすることもできます。 これは、不要なインデントを取り除くのにも役立ちます。 どのブラウザで動作しますか?
ブロック要素は、キャベツの葉を重ね合わせるように、一連のプロパティで構成されます。 ブロックの基礎はその内容 (テキスト、画像など) であり、その幅は width プロパティで指定され、高さは height で指定されます。 コンテンツの周囲にパディングがあり、コンテンツから境界線の内側の端まで空のスペースが作成されます。 次に、境界線自体 (境界線) が来て、ブロックはマージン (マージン)、つまり境界線の外側の端からの目に見えない空きスペースを付けて完成します。 これらのプロパティがブロックに与える影響の順序は明確に定義されており、違反することはできません。 図では、 図 3.1 は、これらのプロパティのセットとしてのブロックを示しています。 米。 3.1. ブロック要素を形成するプロパティ わかりやすくするために、ブロックのプロパティは入れ子人形の形で表すことができます (図 3.2)。 小さな入れ子人形は大きなマトリョーシカに挿入できますが、その逆はできません。
米。 3.2. マトリョーシカ人形 実際、コンテンツを含め、これらのプロパティはどれも必須ではないため、padding 、 border 、および margin プロパティの組み合わせを含むブロックを形成することも、それらをまったく使用せずに作成することもできます。 フィールドマージンは、境界線の内側の端またはブロックの端から、ブロックの内容を境界付ける仮想の長方形までの距離になります。 それぞれの辺でマージンの値が異なる場合があるため、もう一方の辺については「上マージン」または「上マージン」などの表現が使用されます。 「マージン」という指定は、すべての辺に対して同じマージン値として理解されるべきです。 マージンの主な目的は、テキストなどのブロック要素のコンテンツの周囲に空白を作成し、要素の端にぴったりと収まらないようにすることです。 余白を使用すると、テキストの読みやすさが向上し、改善されます。 外観ページ。 例 3.1 は、フィールドを使用してテキストをフォーマットする方法を示しています。 例 3.1: パディングプロパティの使用
彼らは私たちを征服し、私たちを拷問し、生きたまま火あぶりにするためにやって来ました。彼らは、コルテスがアナワクのインディアンにしたのと同じことを、私たち自由イギリス人に行うためにやって来ました。
例の結果を図に示します。 3.3.
米。 3.3. テキストの周囲の余白 フィールド値を負にすることはできません。 国境境界線は、要素の 1 辺、2 辺、3 辺、または 4 辺すべての余白の周囲の線です。 各線には太さ、スタイル、色があります。 境界線を作成するには、これらすべてのパラメーターを同時に設定するユニバーサル境界プロパティを使用します。要素の個々の側面に線を作成するには、 border-left 、 border-top 、 border-right 、および border-bottom プロパティを使用できます。それぞれ、境界線を left、top、right、bottom に設定します。 例 3.2 は、要素の左側に行を追加する方法を示しています。 例3.2。 赤い点線 XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
結果 この例図に示されています。 3.4.
米。 3.4. テキストの隣の行 行からテキストまでの距離は、パディング値によって制御されます。 くぼみインデントは、ブロックの境界線、マージン、またはコンテンツの外端からの空白スペースです。 前述したように、マージン付きの境界線はオプションであり、存在しない場合もあるため、パディングの作成方法は状況に応じて異なります。 マージンと同様に、「上マージン」または「上マージン」という表現が使用され、他の面についても同様の表現が使用されます。 「インデント」という指定は、すべての面で同じインデント値として理解される必要があります。 くぼみには次のような特徴があります。
例 3.3 は、パディングが折りたたまれて透明になることを示しています。 例3.3。 インデントの使用 XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ライオンが吠えるのは、その領土が自分のものであることを宣言するとき、または自分が自然の王であると宣言するときだけです。
この例の結果を図に示します。 3.5. ブロック間の距離は 40 ピクセルではなく 20 ピクセルであることに注意してください。これは、ブロックの上部と下部のパディングを合計することで得られます。 これは、近くのマージンが結合される崩壊効果によって発生します。
米。 3.5. 要素のパディング この図は、background プロパティによって設定された色が要素の境界線を超えず、パディングに影響を与えないことを明確に示しています。 ブロック幅は複合値であり、いくつかのプロパティ値で構成されます。
すでに述べたように、一部のプロパティが欠落している可能性がありますが、その場合でも幅は影響を受けません。 全幅は図の通りです。 3.6 は黒い点線の形で表示されます。
米。 3.6. ブロック幅 幅が指定されていない場合は、デフォルトで auto になります。 この場合、ブロックの幅は、マージン、ボーダー、パディングの値を維持しながら、使用可能な幅全体を占めます。 利用可能な幅の下で この場合これは親ブロックのコンテンツの幅を意味し、親がない場合はブラウザのコンテンツの幅を意味します。 次のスタイルがレイヤーに対して記述されているとします。 幅: 300ピクセル; /* コンテンツの幅 */ margin: 7px; /* パディング値 */ border: 4px 単色黒; /* 枠線のオプション */padding: 10px; /* テキストの周囲の余白 */ このエントリによるブロック幅は 342 ピクセルに等しくなります。この値は、コンテンツの幅に左パディング、左ボーダー、左マージン、右マージン、右ボーダー、右パディングを加えた値を加算することによって取得されます。 すべての数字を合計してみましょう。 幅 = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342 幅の形成を伴うブロックモデルには多くの不都合があることに注意する必要があります。 特定のブロック幅を設定する必要がある場合は、常に計算を行う必要があります。 問題は組み合わせるときにも始まります 異なる単位測定値、特にパーセンテージとピクセル。 コンテンツの幅が 90% に設定されているとします。ピクセル単位で指定されたマージンと境界線を追加すると、パーセンテージはピクセルに直接変換されないため、ブロックの合計幅を計算することは不可能です (CSS3 ではこれを合計できます)。ただし、この機能はすべてのブラウザでサポートされているわけではありません）。 その結果、ブロックの合計幅が Web ページの幅を超える可能性があり、水平スクロール バーが表示されることになります。 この状況から抜け出す方法は 2 つあります。ブロック モデルのアルゴリズムを変更することと、ネストされたレイヤーを使用することです。 ブロックモデルアルゴリズムすでに述べたように、ブロック幅はコンテンツの幅とマージン、ボーダー、パディングの値から形成されます。 ブラウザで インターネットエクスプローラー互換モード (つまり、doctype が指定されていない場合) では、アルゴリズムが自動的に変更され、ブロック全体の幅が width に設定されます。 他のブラウザはアルゴリズムをそう簡単に変更しません。さらに、互換モードが悪であることはご存知でしょう。 CSS3 には、私たちにとって役立つ素晴らしいボックス サイズ設定プロパティがあります。 border-box に設定すると、幅にはマージンと境界線が含まれ始めますが、パディングは含まれません。 したがって、box-sizing と border-box の値をスタイルに接続することで、幅をパーセンテージとして設定し、ブロックの幅が変わることを心配することなく安全にボーダーとパディングを指定できます。 残念ながら、ブラウザの場合と同様に、このプロパティには小さな問題があります。すべてのブラウザがそれを理解できるわけではありません。 ブラウザーが少なくともブラウザー固有のプロパティをサポートしていることをうれしく思います。 テーブル内 3.1 はブラウザのサポートを示します。
表からわかるように、プロパティには混乱と変動があるため、ハイブリッドを作成し、3 つのプロパティすべてを同時に示す必要があります (例 3.4)。 例3.4。 ブロック幅 XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx
ブロック幅100%
この例は、表にリストされているすべてのブラウザで動作します。 ただし、3.1 は、-moz および -webkit で始まる非標準プロパティが使用されているため、CSS3 では無効です。 ブロック幅はパディング値を含めて 100% です。 box-sizing プロパティを使用しないと、ブラウザーに水平スクロールバーが表示されます。 入れ子になったレイヤーボックス サイズ設定プロパティの使用は、古いバージョンの IE では機能しないことを除いて、誰にとっても有益です。 IE7 および IE6 に基づいて Web サイトを設計している場合は、層をネストする古くから実績のある方法が適しています。 考え方は単純です。外側のブロック要素には必要な幅のみが設定され、ネストされたブロックにはマージン、ボーダー、パディングなどの他のすべてが設定されます。 ブロックのデフォルトの幅はその親の使用可能な幅と等しいため、ブロックはある意味で互いに重なり合いますが、結合された要素の実際の幅は明確に定義されます。 例 3.5 は、ネストされたレイヤーの使用を示しています。 例3.5。 入れ子になったレイヤー XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
レイヤー幅100%
この例の結果を図に示します。 3.7.
米。 3.7. ブロック幅（パーセント） ネストされたレイヤーの利点は、インデントの使用 (ボックスのサイズ変更ではインデントが考慮されません)、この方法の多用途性、および必要に応じて背景を 1 つまたは別のレイヤーに追加できるという事実です。 これにより、要素の外観が多少変わります。これは、背景画像が含まれている場合に特に当てはまります。 この方法の欠点の中には、特にこの方法が頻繁に使用される場合に、コード構造が複雑になる追加ブロックの追加が挙げられます。 しかし、これはメリットに比べれば小さなことだと考えられます。 ブロックの幅と同じルールがブロックの高さにも適用されます。 つまり、高さはコンテンツの高さ（height）、フィールド（padding）、ボーダー（border）、マージン（margin）の値で構成されます。 height プロパティが指定されていない場合は、 auto として扱われます。この場合、コンテンツの高さはコンテンツに基づいて自動的に計算されます。 図では、 図 3.8 は、最終的な高さを与えるプロパティを示しています (黒い点線で示されています)。
米。 3.8. ブロックの高さ 同時に、幅と高さの構築原理は似ているにもかかわらず、大きな違いがあります。 これは、幅と高さが指定されていない場合に適用され、デフォルトで auto になります。 ブロック幅の場合、これは利用可能なコンテンツの最大幅であり、ブロック高さの場合、これはコンテンツの高さです。 また、ブロック幅の場合、明示的に指定されていなくても、親の幅がわかります。 これにより、幅をパーセンテージで設定できます。 親の高さは計算されず、指定する必要があるため、高さにパーセンテージを使用しても何も起こりません。 例 3.6 は、ブロックの高さをパーセンテージとして設定する方法を示しています。 例3.6。 ブロックの高さ XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
レイヤーの高さ 100%
この例の結果を図に示します。 3.9.
米。 3.9. ブロックの高さのパーセンテージ タグ用 この例では、親はタグです , そのため、高さの値を 100% に設定します。 同時に と同じルールが適用されます , そのため、パーセント値はページの高さではなく、コンテンツの高さから計算されます。 だから親にとっては 、これがタグです 、高さの値を 100% に設定する必要もあります。 この場合のみ、ブロックの高さのパーセンテージはページの高さに依存します。
高さはマージン、ボーダー、パディングの影響を受けるため、例では次のようになります。 縦縞スクロール。 幅の場合と同じ方法、つまりボックス サイズ プロパティを使用するか、ネストされたレイヤーを使用して、この影響を取り除くことができます。 もう 1 つの機能は高さに関連しています。ブロックのコンテンツが特定の高さでその寸法を超えると、コンテンツはブロックの上に表示され始めます (図 3.10)。
米。 3.10. ブロックサイズを超えています 同様の結果を生成するコードを例 3.7 に示します。 例3.7。 ブロックサイズを超えています XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ライオンが吠えるのは、その領土が自分のものであることを宣言するとき、または自分が自然の王であると宣言するときだけです。 ライオンの狩猟範囲は長さと幅が最大30キロメートルにも及ぶことがあります。 このようなトラブルを避けるためには、コンテンツの高さを設定しないことをお勧めします。そうすれば、ブロックの高さは自動的に計算されます。 ただし、高さを明確に指定する必要がある場合があるため、値 auto または hidden を使用してスタイルにオーバーフロー プロパティを追加することをお勧めします。 それらの結果は異なります。auto は必要なときにスクロール バーを自動的に追加します (図 11a)。hidden は指定されたサイズに収まらないものをすべて非表示にします (図 11b)。
A. 自動値
b. 隠された意味 米。 11. オーバーフロープロパティの使用 背景背景色とブロックの点線枠を同時に設定すると、色の付いた領域の内側に枠線が通っていることが目立ちます。 の真実 さまざまなブラウザ矛盾があり、特に Internet Explorer バージョン 7.0 までには、背景が境界線の内側の端に沿って表示されるというバグが含まれています (図 12c)。 バージョン 8.0 以降、このエラーは修正され、標準に従って背景が表示されるようになりました (図 12d)。 ブラウザ Opera (図 12a)、Firefox (12b)、Safari および Chrome (図 12e) は背景を正しく表示します。 点線のボックスが表示されると若干の違いが見られますが、ボックス モデルには影響しません。 d. サファリ、クローム 米。 12.ブラウザに背景を表示する 例 3.8 は、そのような境界を取得するコードの作成方法を示しています。 例3.8。 背景と枠線 XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
おっと...
ブラウザによる境界線の描画方法の違いは、色付きの背景と点線でのみ顕著です。 ソリッド フレームの場合、ブラウザでのブロックの外観はほぼ同じになります。 CSSボックスモデル 英語ボックスモデル（ボックスは箱です）と呼ばれます。 この翻訳は、ブロック モデルの本質を理解するのに少し役立ちます。 肝心なのは、画面上でページを形成するときにブロック、つまり画面の長方形の領域が使用されるということです。 CSS ボックス モデルは、CSS を理解するための基礎の 1 つである文書書式設定モデルです。 CSS を学習する前に、HTML を学習しておく必要があります。つまり、次のことを知っておく必要があります。 HTMLタグブロック要素とインライン要素に分かれています。
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
図 2. 例 2 の動作中。 
図 3. CSS ボックス モデル。 
図 4. 職場での例 #3。 
図 5. 例 4 の作業。 
図 6. 例 5 の作業。 
図 7. ブロック幅。 
図 8. 2 つのブロック モデル。 
図 9. ブロックの高さ。 
図 10. 例 6 の作業。 
図 11. 例 7 の作業。 
図 12. 例 8 の作業。 
図 13. 例 9 の作業。 
図 14. 値が auto のオーバーフロー プロパティ。 
図 14. 値が非表示になっているオーバーフロー プロパティ。 
