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 を使用して MySQL および Redis サービスをデプロイする方法

目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...

MySQL 学習のまとめ: InnoDB ストレージ エンジンのアーキテクチャ設計の予備的な理解

1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...

MacでのMySQL初期化パスワード操作

Macでデータベースを操作する際に個人が遭遇するデータベース起動の問題の簡単な記録1. Apple-...

Vueコンポーネントのカスタムイベントの詳細な説明

目次要約する <テンプレート> <div> 要素 <h2>{{メ...

リンク内の href=# はどういう意味ですか?

現在のページへのリンク。 -------------------一般的な使用法は次のとおりです。 &...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...

Vue でキープアライブを使用した後にキャッシュをクリアする方法

キープアライブとは何ですか?通常の開発では、コンポーネントによっては複数回初期化する必要のないものも...

Vueログイン機能の実装

目次前面に書かれたログインの概要ログインビジネスプロセスログインサービスの関連技術ポイントログイント...

jQueryカルーセル機能を実装する方法

この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおり...

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

Raspberry Pi 4b ubuntu19 サーバーへの docker-ce のインストール手順

Raspberry Pi モデルは 4b、1G RAM です。システムはubuntu19.10サーバ...

JS を使用して要素が配列であるかどうかを判断する例

検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...

Windows 10 での Hyperledger Fabric 1.4 環境構築プロセスの図

内容Hyperledger fabric1.4環境のWindows 10でのセットアップ前提条件Wi...

16 の XHTML1.0 と HTML の互換性ガイドラインの概要

1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...