CSS ボックスモデル内のパディングと略語の詳細な説明
|
上図のように、パディング値は時計回り（右上、右下）の複合属性であり、パディングの内側の余白がボックス サイズの実際の幅と高さに影響します。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<タイトル></タイトル>
<スタイル タイプ="text/css">
.wrap{幅: 200px;高さ: 200px;
background-color:red;/* パディング: 10px; *//* パディング: 10px 20px; *//* パディング: 10px 20px 30px; */パディング: 10px 20px 30px 40px;}
</スタイル>
</head>
<本文>
<div class="wrap"></div>
</本文>
</html>上記のコードに示されているように、ボックスの実際の幅と高さが変更されないようにするにはどうすればよいでしょうか。追加されたパディング値を減算する必要があります。 CSS ボックスモデルのパディングと省略形の詳細説明はこれで終わりです。CSS ボックスモデルに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: docker リモート API のワンクリック TLS 暗号化の実装
推薦する
nginxでの共有メモリの使用に関する詳細な説明
nginx プロセス モデルでは、トラフィック統計、トラフィック制御、データ共有などのタスクを完了す...
DockerはRedisをインストールし、操作用のビジュアルクライアントを導入します
1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...
MySQLでのカスタムパラメータの使用に関する詳細な説明
MySQL 変数には、システム変数とシステム変数が含まれます。今回の学習課題はユーザー定義変数です。...
検証コードケースのjs実装
この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
Vue が Ref を使用してレベル間でコンポーネントを取得する手順
VueはRefを使用してレベル間でコンポーネントインスタンスを取得します例の紹介開発プロセスでは、レ...
VSCode 構成 Git メソッドの手順
Git は vscode に統合されており、git コマンドをいくつか記述しなくても、クリックするだ...
MySQL の int(n) の後の n はどういう意味ですか?
int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...
シーケンス関数を実装する MySQL コード
MySQLはシーケンス関数を実装する1. シーケンスレコードテーブルを作成する テーブル `sys_...
JavaScript コードベースをよりクリーンにする 5 つの方法
目次1. 短絡や条件文の代わりにデフォルトのパラメータを使用する2. 複数の条件の処理3. スイッチ...
MySQLクエリの文字セットの不一致の問題を解決する方法
問題を見つける最近、仕事で問題が発生しました。MySQL データベースにテーブルを作成するときに、ラ...
フロントエンド JavaScript でローカルあいまい検索機能を実装する方法の例
目次1. プロジェクトの見通し2. 知識ポイントObject.assign() の使用法filter...
Centos8環境でSSHポート番号を変更する方法
目次序文始める序文サーバーのデフォルトの SSH ポート番号は通常 22 であるため、ほとんどのユー...
MySQL で結果を選択して更新を実行する例のチュートリアル
1. 単一テーブルクエリ -> 更新 テーブル名の更新 フィールド1=新しい値1、フィールド2...
要素のel-tree複数選択ツリー（チェックボックス）親子ノードの関連付けが関連付けられていません
属性チェック-厳密公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連...
Linux サーバー上のローカル静的リソースにアクセスするために nginx を使用する方法
1. ポート 80 が占有されているかどうかを確認します。通常、ポート 80 は Apache サー...