CSS マージン縮小 (マージン縮小) 概要分析_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS マージン縮小 (マージン縮小) 概要分析_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:43 AM

CSS によるマージンの縮小

a. まず、w3c ドキュメントのマージンの縮小の定義を見てみましょう:

CSS では、2 つ以上のボックス (兄弟である場合もそうでない場合もあります) の隣接するマージンを組み合わせて、この方法で結合されたマージンは折りたたまれると言われ、結果として結合されたマージンは折りたたまれたマージンと呼ばれます。

翻訳: CSS では、隣接するボックス (兄弟要素である場合もそうでない場合もあります) を 1 つのマージンに結合できます。。このマージンの結合はCollapseと呼ばれ、この結合されたマージンはMargins Collapseと呼ばれます。

例:

<style type="text/css">.testBFC{    width:100px;    height:100px;    background-color:green;}.testBFC div{    width:30px;    height:30px;    background-color:pink;    }.testBFC div:first-child{    margin-bottom:10px;}.testBFC div:last-child{    margin-top:10px;}</style><div class="testBFC">    <div>div1</div>    <div>div2</div></div>

実行結果は以下のようになります。この図から、div1 の margin-bottom と div2 の margin-top がマージされていることがわかります。その結果、div1 と div2 の間には 10 ピクセルしかありません。当初はそれらを 20 ピクセル離す必要がありましたが、これを実現するにはどうすればよいでしょうか。 div1 のクラスに、display: inline-block を追加できます。これには、マージン崩壊の問題を解決または回避する方法が含まれます。

w3c ドキュメントの特定の注記を見てみましょう:

注意上記のルールは次のことを暗示しています:

フローティングボックスと他のボックスの間のマージンは折りたたまれません (フロートボックスとそのボックスの間でも)

新しいブロック書式設定コンテキストを確立する要素のマージン (float や、「visible」以外の「overflow」を持つ要素など) は、そのインフローの子と一緒に折りたたまれません。

絶対的に配置されたボックスのマージン(フロー内の子であっても) 折りたたまれません。

インラインブロックボックスのマージンは (フロー内の子であっても) 折りたたまれません。

フロー内ブロックレベル要素の下マージン兄弟にクリアランスがある場合を除き、常に次のフロー内ブロックレベルの兄弟の上マージンで折りたたまれます。

フロー内ブロック要素の上マージンは、次のフロー内ブロックレベルの子の上マージンで折りたたまれます。要素には上部の境界線も上部のパディングもなく、子にはクリアランスがありません。

「高さ」が「auto」、「min-height」が 0 のインフローブロックボックスの下マージンは、その要素によって折りたたまれます。 last in -flow block-level ボックスに下部パディングも下部境界線もなく、クリアランスのある上部マージンで子の下部マージンが折りたたまれない場合、子の下マージン。 ' プロパティはゼロで、上下の境界線も上下のパディングもなく、「高さ」は 0 または「自動」で、行ボックスとそのすべてのインフローが含まれていません。子のマージン (存在する場合) が折りたたまれます。

1. フローティングボックスは他のボックスの間で折りたたまれません。 (フローティングボックスとその通常のフローの子要素であっても折りたたまれません。) たとえば、次の例では、親要素と子要素の間で外縁が折りたたまれます。この場合、親要素で設定できます。または子要素がフローティングになった場合は正常に表示されます。

<head>    <style type="text/css">        *{            margin:0;            padding:0;        }        .testBFC{            width:100px;            height:100px;            background-color:green;            margin-top:10px;        }        .testBFC div{            width:30px;            height:30px;            background-color:pink;        }        .testBFC div:first-child{            margin-top:10px;        }    </style></head><body><div class="testBFC">    <div>div1</div></div></body>

2. 通常のフローで子要素と一緒に折りたたまれないように、要素の余白に新しいブロック書式設定コンテキストを作成します。上の例のように、属性 overflow:hidden

3 を外側の div に追加できます。絶対に配置されたボックスは折りたたまれません。上の例では、親要素または子要素に属性 (position:absolute または fix) を追加できます。

4. 通常のドキュメントフローでは、ブロックレベルの要素の下マージンはその次の要素の上マージンに戻ります。兄弟要素はクリアランスを設定しないと折りたたまれます。記事上部の例を参照してください。

5. ブロックレベル要素に上境界線、上パディングがない場合、ブロックレベル要素の上マージンは、その子要素の上マージンと一緒に折りたたまれます。要素にはクリアランスが設定されていません。例: この例はすでにヒント 1 にあります。

6. このブロックレベル要素が下パディング、下境界線、および height:auto、min-height を設定しない場合、ブロックレベル要素の下マージンはその最後のブロックレベル子要素の下マージンと重なってしまう可能性があります。 :0

7. このようなボックスには、マージンが折りたたまれ、min-height:0、上下の境界線または上下のパディングが設定されておらず、高さ:0 または auto があり、ラインボックスとそのすべてが含まれていません。要素の余白が折りたたまれます。

詳細については、w3c ドキュメントを参照してください: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 中国語版

中国語版、とても使いやすい

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。