CSSにおけるマージン値と垂直マージンの重なりについて

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 サーバーに接続する方法

推薦する

ホバードロップダウンメニューを実装するためのネイティブJS

JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...

Vue3.0はドロップダウンメニューのカプセル化を実装します

Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...

ウェブページ上の小さなスペースに大きな画像を配置する方法

出典: www.bamagazine.comウェブページのバナー、ニュースの見出しの周りのスペース、...

既存のMySQLデータベースの文字セットを統一する方法

序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...

MySQLキーワードDistinctの詳細な紹介

MySQLキーワードDistinctの使い方の紹介DDL SQLを準備します: テーブルテストを作成...

HTML におけるスクリプトの配置に関する簡単な説明

以前は、スクリプトは HTML 内のどこにでも配置できると思っていましたが、今日、要件に取り組んでい...

vue-cli 設定では Vuex の完全なプロセスレコードを使用します

目次序文インストールと使用方法モジュラー管理Vuex の状態永続性要約する序文Vue 開発では、ユー...

MySQL 5.7.21 winx64 グリーンバージョンのインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 5.7.21のインストールと設定方法を記録しています。具体的な内容は以下のと...

HTML tbody の使用

構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....

CSS を使用して三角形を実装する一般的な手法 (複数の方法)

面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法につい...

JavaScript のクロージャの詳細な説明

導入クロージャは JavaScript の非常に強力な機能です。いわゆるクロージャは関数内の関数です...

MySQL の nvl() 関数に似た ifnull() 関数についての簡単な説明

IFNULL(式1,式2) expr1 が NULL でない場合、IFNULL() は expr1 ...

Ubuntu システムに Theano と Keras をインストールする方法

注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...

MySQL における一般的な高度な SQL ステートメント

MySQL 高度な SQL ステートメント kgc を使用します。 テーブルlocation(Reg...

Docker実践: Pythonアプリケーションのコンテナ化

1. はじめにコンテナはサンドボックス メカニズムを使用して相互に分離します。コンテナ内にデプロイさ...