CSSブロッキングマージとその他の効果についての簡単な説明

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージン

マージンを使用するとマージが発生します

次のプロパティはマージンの結合を防止します。

国境

表示: テーブル

ディスプレイ: フレックス

上記の内容は、以下の詳細な説明の結果です

合併阻止【詳細説明】

/* スタイルシート */

    。箱{
        border:1px 赤一色;
        高さ: 100px;
        margin: 10px; /* 注意: これは 10 ピクセルです。 */
    }
<!-- HTML -->

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

ブラウザでは次のように表示されます。

有理数のマージンによると、divの上部と下部の間隔は20pxである必要があります。

解決策1:

<!-- HTML -->
<!-- css は変更されていません -->

<div class="box"></div>
<div style="border: 1px solid blue"></div> <!-- 新しく追加されました -->
<div class="box"></div>
<div style="border: 0.1px solid blue"></div> <!-- 新しく追加されました -->
<div class="box"></div>
<div class="box"></div>

ブラウザでは次のように表示されます。

<!-- HTML -->
<!-- css は変更されていません -->

<!-- HTML -->
<div class="box"></div>
<div style="display: table"></div>
<div class="box"></div>
<div style="display: flex"></div>
<div class="box"></div>
<div class="box"></div>
<!-- display:block / inline はマージをブロックしません。テーブル flex のみがブロックできます -->

ブラウザでは次のようになります:

その他の影響

ディスプレイはul liの小さなドットに影響します

position: absolute はdisplay: inline に影響します

位置: 固定は変換に影響します

フロートはインラインに影響します

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Web2.0: 情報過多の原因と解決策

>>:  MySQL ストアド プロシージャの作成、呼び出し、管理の詳細な説明

推薦する

Dockerコンテナの起動失敗を解決する方法

質問: コンピュータを再起動した後、docker の mysql コンテナを再起動できません。原因が...

CentOS 7にChromeブラウザをインストールする方法

この記事では、CentOS 7 に Chrome ブラウザをインストールする方法を紹介します。詳細は...

超シンプルな QPS 統計手法 (推奨)

過去 N 秒間の QPS 値の統計 (1 秒あたりの選択、挿入などを含む) mysql> se...

Vueでミックスインを使用する方法

目次序文使い方要約する序文Vue にはコードの再利用に使われる mixins という設定項目がありま...

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

純粋な CSS3 で実装された三目並べゲーム

操作効果: html <div class="三目並べ"> <...

Vue3 でパンくず関数コンポーネントをカプセル化するいくつかの方法

目次序文1. パンくずリストはなぜ必要なのでしょうか? 2. 一次包装1. 実装のアイデア2. コー...

Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル

Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...

zabbix を使用して ogg プロセスを監視する (Linux プラットフォーム)

以前作成されたデータベースの ogg プロセスは、発見されるまでの約半月間ダウンしていました。起動で...

CSS3で実装された6つの境界遷移効果

6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...

HTML と埋め込み Flash の両方におけるスクロールバーの分析と処理

開発を行う際に、次のような状況に遭遇することがよくあります。 a.swf が Web ページに追加さ...

jsフェッチ非同期リクエストの使用の詳細な例

目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...

Alibaba Cloud サーバーの購入とインストール方法

1. サーバーを購入するこの例では、購入したサーバーはAlibaba Cloudです。大学生はAli...

nginx の default_server 定義とマッチングルールの詳細な説明

nginx の default_server ディレクティブは、server_name と一致しない...