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 ストアド プロシージャの作成、呼び出し、管理の詳細な説明

推薦する

CentOS7 で Jenkins+Maven+Git 継続的インテグレーション環境を構築する方法

この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...

GZIP 圧縮 Tomcat と Web パフォーマンスの改善プロセス図

1. はじめに最近、あるプロジェクトに取り組んでいたのですが、サーバーからクライアントに返される J...

HTML で div+CSS を使用してシンプルな矢印アイコンを実装するコード

ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェ...

Linux Zabbixカスタム監視およびアラーム実装プロセスの分析

ターゲットzabbix フロントエンド監視の iostat コマンドでデータの 1 つを表示します。...

Dockerの動作モードと原理の詳細な説明

次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...

Windows 10 システムに mysql-8.0.13 (zip インストール) をインストールする詳細なチュートリアル

インストール環境の説明•システムバージョン: windows10 •MySQL バージョン: mys...

jQueryチェーン呼び出しの詳細な説明

目次チェーン呼び出し小さなケースチェーン呼び出しjQuery オブジェクトが任意のメソッド (ノード...

インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法

テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...

Hyper-v仮想マシンを使用してCentos7をインストールする

目次導入準備するシステムイメージをダウンロードHyper-Vを有効にする新しい仮想ネットワークスイッ...

Vue3 における computed の新しい使用例のまとめ

vue3 での computed の使い方。vue3 は vue2 のオプション API と互換性が...

HTMLテキスト内のすべてのタグを置き換える方法

(?i) は大文字と小文字を区別しないことを意味します。大文字と小文字をすべて置き換えます。 htm...

VirtualBox は CentOS7 仮想マシンと拡張ツールをインストールします (画像とテキスト)

コンピュータシステム: win7この記事は主に写真に基づいており、多くの写真が含まれていますCent...

202 無料の高品質 XHTML テンプレート (1)

ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...

CSSは5つの一般的な2D変換を実装します

CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...

Vue が Web オンラインチャット機能を実現

この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...