Web ページをレイアウトするとき、ページのデザインを行ったことのある友人は、マージン属性が CSS の非常に重要なスタイル属性であることを知っていると思います。それでは、マージン属性とは何なのかと疑問に思う初心者もいるかもしれません。
CSS スタイルのマージンは、CSS の外側のマージンと間隔の属性であり、div ブロックまたは要素間の上下左右の距離を制御します。明らかに、CSS におけるマージンの役割を過小評価することはできません。 。この記事では、cssのmarginプロパティの具体的な使い方を初心者向けに紹介します。お役に立てれば幸いです。
以下では、具体的なコード例を通して詳しく説明します
CSSのマージン属性、つまりCSSマージン属性の具体的な使用コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css中的margin属性使用示例</title>
<style>
.demo{
width: 300px;height: 100px;
background-color: #ccccff;
}
.demo1{
margin-left:50px;
margin-top: 50px;
margin-bottom: 50px;
width: 300px;height: 100px;
background-color: #b2ecef;
}
.demo2{
width: 300px;height: 100px;
background-color: #94ef9a;
}
.demo1 p{margin-left: 50px;
}
</style>
</head>
<body>
<div class="demo">
<p>没有给这个div块设置margin值</p>
</div>
<div class="demo1">
<p>给这个div块设置了margin值,并且给此段文字也设置margin值</p>
</div>
<div class="demo2">
<p>没有给这个div块设置margin值</p>
</div>
</body>
</html>ブラウザでの上記のコードの効果は次のとおりです。
この図から、要素のマージン値を設定した後、div ブロック間の間隔が変化することがわかります。 div ブロックのデモ 1 では、margin-left の style 属性を設定した後、要素はブラウザの左側から 50 ピクセル移動し、margin-top を設定した後、要素は上の div ブロックからも 50 ピクセル移動して、 margin-bottom スタイル属性は、div ブロックの上の境界線を下に 50 ピクセル移動し、div ブロックのデモ 1 はこれを使用して上、左、下のマージンを生成します。同時に、テキストの 2 番目の段落に margin-left スタイル属性も追加した後、テキストは、demo1 の div の左境界線から 50 ピクセル移動し、外側のマージンが作成されました。
マージンの値は上下左右から選択できます。もちろん、この属性を div に直接追加しても上記の効果を得ることができます。デフォルトでマージンに値を 1 つだけ追加すると、それは 4 辺すべての距離の同じ値と同等になるためです。または、margin: 50px 50px 50px 50px; を追加します。これは、CSS の細分化された margin-top、margin-bottom、および margin-left に相当します。右、下、左は時計回りの方向です。
それでは、上記はcssスタイルのmargin属性、つまりcssのmargin属性の具体的な使い方の紹介です。これが必要な友人に役立つことを願っています。
以上がCSSマージンのプロパティとは何ですか?それらの用途は何ですか? (詳しい説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
cohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AMこの投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。
カーソルの次のレベル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
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
WebStorm Mac版
便利なJavaScript開発ツール
ホットトピック
7712
15164014139452128925123229