CSS ボックス モデルには、内側の間隔、外側の間隔、コンテンツ、境界線という 4 つの要素があります。これら 4 つは、ボックス モデルの使用を定義します。今日は、
ボックス モデルの外側の間隔の使用方法について説明します。外側の間隔は CSS ボックス モデルの 1 つなので、外側の間隔を設定する方法を見てみましょう。
margin: これは、1 つのステートメントですべてのマージン属性を設定できる短縮属性です。
完全なマージンの例を見てみましょう:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double;}
</style>
</head>
<body>
<div class="diyi">
<p>这是一个p标签，是用来使用外边距的</p>
</div>
</body>
</html>これは、内部にいくつかの境界線が追加された単純な HTML コードの例です。したがって、表示される効果は次のとおりです:
これ先ほどのコード文字列の効果です。
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin-top: auto}
</style>上記は、
。次に、画像を見てください:
効果は上記と同じですか？
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin: auto}
</style> コードは上記と同じように感じられますか? しかし、これが次のことであることも明らかです。 inside 上向きの要素がキャンセルされたので、4 辺すべてのマージンがゼロになりました。効果を見てみましょう:
すべてのマージンがなくなっているのがわかりますか?
これも非常に簡単です。例を見てみましょう:
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin:20px}
</style>これはすべてのマージンを 20 に設定するものです。見てわかるように、レンダリングを見てみましょう:
あなた周囲の境界線がすべて 20 ピクセルであることがはっきりとわかります。
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin-right:20px}
h1{border:double; margin-bottom: 50px}
</style>
</head>
<body>
<div class="diyi">
<h1 id="这里是PHP中文网">这里是PHP中文网</h1>
sdfahsdkjfhksjdhf
<p>这是一个p标签，是用来使用外边距的</p>
</div>
</body>この例では、マージン距離が 50 ピクセルで、右外側の端に下マージンが追加されます。 pタグまでの余白距離は20pxです。レンダリングを見てみましょう:
これは、1 つの属性に複数のマージンを設定する方法であることは明らかです。まったく難しいことではありませんので、誰でも試してみることができます。
上記がこの記事の全内容です。さらに詳しく知りたい場合は、PHP 中国語 Web サイトの
css 学習マニュアルコラムにアクセスして学習してください。ご質問がございましたら、以下よりお問い合わせください。 【編集者のおすすめ】
CSSボックスモデルの枠線の使い方をご存知ですか？ CSSボックスモデルの構成を紹介しますCSS擬似要素とは？ CSS 疑似要素の詳細な紹介 (例も含めて)以上がCSSの外側の間隔を設定するにはどうすればよいですか? CSS の外側の間隔を設定する方法 (例あり)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AMCSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。
Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。
UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AMCSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。
微笑んでいますか？Apr 23, 2025 am 09:57 AMまあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです
「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AMイェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。
CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AMこのCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。
Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AMほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio
私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
SublimeText3 中国語版
中国語版、とても使いやすい
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ホットトピック
7685
15163914139352128725122929