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 サーバーに接続する方法
推薦する
vue.js パッケージ化プロジェクトの後の空白ページの解決策
Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化...
Baotaパネルを再起動すると、「-ModuleNotFoundError: No module named 'geventwebsocket'」というメッセージが表示されます。
背景：サーバーがFlaskプロジェクトをデプロイし、python3をインストールしたため、再起動時に...
docker 環境でのデータベース バックアップ (postgresql、mysql) のサンプル コード
目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...
Centos8 で NIS ドメイン サービスをセットアップおよび構成するための詳細な手順
目次NIS の紹介ネットワーク環境: 1. 環境の準備（両方のノードが必要） 2.nisマスターサー...
Vue はトークンを取得してトークン ログインのサンプル コードを実装します
ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...
MAC で Mysql5.7.10 のルートパスワードを変更する方法
まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...
Docker Secretの管理と使用の詳細な説明
1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...
Dockerを使用してDjango+MySQL8開発環境をデプロイする方法の詳細な説明
しばらく前にシステムを再インストールしましたが、バックアップを取っていなかったので、コンピューター上...
Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ
01. コンパイルオプションとカーネルコンパイルLinux カーネル (英語: linux kern...
Web面接でよくある質問：リフローとリペイントの原理と違い
目次ブラウザのレンダリングメカニズムリフローと再塗装リフロー逆流を引き起こす行為：再描画再描画を引き...
Webフロントエンドベクターアイコンの使い方
序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...
Linux yum パッケージ管理方法
導入yum (Yellow dog Updater, Modified) は、Fedora、RedH...
JavaScript のデシェイクとスロットリングの例
目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...
MySQLデータベースのトランザクションとロックの詳細な分析
目次1. 基本概念酸3.自動コミット4. トランザクション分離レベル5. 同時実行の一貫性の問題6....
html、xhtml、xmlの違い
開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...