CSSにおけるマージン値と垂直マージンの重なりについて
|
平行ボックスの余白 (二重余白の重なり) に関する面接の質問: 1 つのボックスに上余白があり、もう 1 つのボックスに下余白がある場合、余白の重なりの問題は発生しますか? 解決策: 値の合計ではなく、大きい方の値を取ります。大きい方が優先されます。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8"/>
<タイトル></タイトル>
<スタイル タイプ="text/css">
*{マージン: 0;パディング: 0;}
.box1,.box2{
幅: 200ピクセル;
高さ: 200px;
}
.box1{
背景色: #f90;
下マージン: 20px;
}
.box2{
背景色: 水色;
上マージン: 50px;
}
</スタイル>
</head>
<本文>
<div class="box1"></div>
<div class="box2"></div>
</本文>
</html>
マージンとパディングは、時計回り（上、右、下、左）の方向と値が同じです。「CSS ボックス モデルのパディングと略語」を表示するには、ここをクリックしてください。 CSS におけるマージン値と垂直マージンの重なりについての記事はこれで終わりです。マージンと垂直マージンの重なりについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: HTML のセルパディングとセルスペース属性を図で説明します
>>: 証明書を使用してリモート Docker サーバーに接続する方法
推薦する
アイデアを使用して Springboot 初期化サーバーを構築する際の問題分析
問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...
Windows システムに VirtualBox と Ubuntu 16.04 をインストールするための詳細なチュートリアル
1. ソフトウェアの紹介バーチャルボックスVirtualBox は、無料のオープンソース仮想マシン ...
Dockerでイメージ情報を表示する方法
この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...
JSオブジェクトの走査順序の詳細な説明
JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...
HTMLを圧縮しない理由はいくつかある
理由は簡単です。 HTML ドキュメントでは、複数の空白文字は 1 つの空白文字と同等です。つまり、...
MySQL でテーブルを作成するときの NULL と NOT NULL の使用方法の詳細な説明
MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...
Javascriptのtry catchの2つの機能についてお話しましょう
プログラムは上から下へ順番に実行され、いくつかの制御文によって実行経路を変更することができます。制御...
vue-router 4 の使用例の詳しい説明
目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...
HTML テーブルの境界線を設定する際のヒント
HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...
Docker swarm を使用して Nebula Graph クラスターを迅速にデプロイする方法のチュートリアル
1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...
React スキャフォールディングの構築方法を学ぶ
1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...
Angular 依存性注入の説明
目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...
画像ファイルの形式とその選択方法
1. どの 3 つの形式ですか?それぞれ、gif、jpg、png です。画像ファイルを最適化すること...
MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル
MySQLをインストールする6つの手順（インストールパッケージのみがインストール場所を選択できます）...
MYSQLは、ショッピングカートに追加する際に重複追加を防ぐためのサンプルコードを実装します。
序文最近、仕事の都合で、APP ショッピングカートの注文支払いに取り組んでいました。テスト中にバグが...