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

推薦する

RabbitMQ の Docker インストールと設定手順

目次単一マシンの展開オンラインプルミラーを見るRabbitMQを作成して実行するMQコンテナを正常に...

Vue + Axios リクエストインターフェース方式とパラメータ渡し方式の詳しい説明

目次1. リクエストを取得する: 2. 投稿リクエスト: 3. 拡張と補足Vue スキャフォールディ...

ウェブページのメモリ使用量とCPU使用量を削減する方法

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

CentOS7にPHP7 Redis拡張機能をインストールする方法

導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...

Centos7 での python3 のインストールとアンインストールに関するチュートリアル

1. Python 3をインストールする1. 依存パッケージをインストールしますyum instal...

Dockerを使用して分散lnmpイメージを作成する

目次1. Docker分散lnmpイメージ生成1. Nginx、MySQL、PHPコンテナを実行する...

CSS3を使用してフォントカラーグラデーションを実装する

Animation.css を使うと公式サイトのフォントがだんだんと変わっていくのが分かりました。c...

MySQL でプロファイルを使用する方法のチュートリアル

プロフィールとは何ですか?特定の SQL のパフォーマンスを分析したい場合に使用できます。プロファイ...

MySql 8.0.11-Winxp64 (無料インストール版) ​​設定チュートリアル

1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...

Vueのコンポーネントのprops属性について詳しく説明します

目次質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る質問 2: 年齢に ...

Linux で特定の時間にコマンドを実行する方法

先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...

列名を知らなくてもMySQLインジェクションを詳細に解説

序文最近、穴を掘ってスペースを作っているだけなので、心が空っぽになっているように感じます。テクノロジ...

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...