マージンのマージの問題を解決する

マージンのマージの問題を解決する

1. 兄弟要素の余白を結合する

効果は次のようになります: (2 つの間の間隔は 150 ピクセルではなく 100 ピクセルです)

2. ネストされた要素の外側の余白を結合する

ネストされた 2 つの要素の場合、親要素にコンテンツがないか、コンテンツが子要素の背後にあり、上部のパディングと境界線がない場合は、親要素の上余白が子要素の上余白と結合され、その値は最大の上余白になり、親要素の上余白として使用されます。親要素の上余白が 0 の場合でも折りたたみが発生します。 (崩壊は垂直方向のみに発生します)

解決:

1. 親要素の 1 ピクセルの上境界線を定義します。

2. 親要素の上部に 1 ピクセルのパディングを定義します。

3. 親要素に overflow:hidden を追加します。

最初と 2 番目の方法は適切ではなく、ボックスのサイズが大きくなることに注意してください。 3 番目の方法は、あふれたコンテンツを非表示にします。これにより、ボックスのサイズは増加せず、コンテンツにも影響はありません。

要約する

上記は、マージンのマージの問題を解決する方法についてご紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  Faint: 「Web2.0 を使用して標準に準拠したページを作成する」

>>:  MySQL トランザクション分離レベルと MVCC の詳細な説明

推薦する

antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...

HTML マウス CSS コントロール

一般的に、マウスは上向きの斜め矢印として表示され、テキストの上に移動すると垂直線になり、ハイパーリン...

SMS送信のカウントダウンを実装するJavaScript

この記事では、SMS送信のカウントダウンを実装するためのJavaScriptの具体的なコードを参考ま...

MySQLは「order by」がどのように機能するかを簡単に理解します

並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...

スクラッチ宝くじの例を実現する JavaScript キャンバス

この記事では、スクラッチ効果を実現するためのJavaScriptキャンバスの具体的なコードを参考まで...

MySQL 5.7.17 のインストールと使用方法のグラフィックチュートリアル

MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...

Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法

目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...

Vue フィルターの使用とタイムスタンプ変換の問題

目次1. 概念をすぐに認識する: 2. ローカルフィルター: 3. グローバルフィルター: 4. 拡...

vuex名前空間の使用

目次Vuex は単一の状態ツリーを使用するため、すべてのアプリケーション状態が比較的大きなオブジェク...

入力ボックスのカーソルサイズの表示が一貫していない問題の解決方法

入力ボックス内のカーソルのサイズが一定ではありませんIE7とChromeの違いは非常に明白ですまず、...

非常に詳細な Vue-Router のステップバイステップのチュートリアル

目次1. ルータビュー2. ルータリンク3. リダイレクト4. ルーティングエイリアス5. ルーティ...

Windows で MySQL のルート パスワードをリセットする方法

今日、WordPress がデータベースに接続できないことがわかりました。ウィンドウ サーバーにログ...

iframeを指すaタグのターゲットの名前とIDの違い

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

mysql ビュー関数の分析と使用例

この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...

クールな充電アニメーションを実現する純粋なCSS

CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...