CSSマージンとは何ですか？ CSSマージンプロパティの概要-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSマージンとは何ですか？ CSSマージンプロパティの概要

不言

Sep 30, 2018 am 10:30 AM

CSS を学習していたときに、CSS マージンの概念について学びました。それでは、CSS マージンとは何でしょうか。境界線の外側はマージンです。マージンはデフォルトで透明なので、その背後にある要素はブロックされません。次に、この記事では CSS のマージン属性の関連内容を紹介します。

まず、css の margin 属性は margin であることを知っておく必要があります。

margin は、周囲 (外側の境界線) の要素領域をクリアします。余白には背景色がなく、完全に透明です。

margin は、要素の上下左右のマージンを個別に変更することも、すべての属性を一度に変更することもできます。

CSS マージン属性値が何に対応しているかを図で見てみましょう:

CSSマージンとは何ですか？ CSSマージンプロパティの概要

CSS マージン属性値は最大 4 つまで指定できます。それぞれ上マージン、右マージン、下マージン、左マージンです。上マージン、左右マージン、下マージンを示す 3 つにすることもできます。上下のマージン、左右のマージンを示す 2 つにすることもできます。少なくとも 1 つ: は四辺余白を示します。

CSS のマージン属性値は auto にすることができ、ブラウザーはマージンを自動的に計算し、ブロックレベルの要素は水平方向に中央に表示されます。属性値はパーセンテージにすることができ、パーセンテージは幅に基づいて計算されます。親要素。属性値は CSS の長さの単位にすることができ、値は負の値にすることができます。属性値は継承可能です。

次に、css margins の実装を直接見てみましょうコード

注: css margin 属性のデフォルト値は 0 です。 margin が値を宣言した場合、マージンは表示されません。

css マージンの実装コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p{
    background-color:yellow;
}
p.margin{
    margin:2cm 4cm 3cm 4cm;
}
</style>
</head>
<body>
<p>没有指定外边距大小</p>
<p class="margin">有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距</p>
</body>
</html>

css マージンの実装 効果は次のとおりです:

CSSマージンとは何ですか？ CSSマージンプロパティの概要

最後に:

上記はこの記事の全内容です。CSS のマージン属性 margin について詳しく知りたい場合は、こちらを参照してください。 CSS学習マニュアルへ。

以上がCSSマージンとは何ですか？ CSSマージンプロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

CSSインクルージョン：プロジェクトに適した方法を選択しますMay 16, 2025 am 12:02 AM

bestmethod forincludingcsssdependsonprojectsized complexity：1）forlargerprojects、useexternalcssssssssssssssavesainabyandperformance.2）

これは発生することは想定されていません。不可能をトラブルシューティングしますMay 15, 2025 am 10:32 AM

あなたが考えたことのない他の何かであることが判明したそれらの不可能な問題の1つをトラブルシューティングすることがどのように見えるか。

@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。

静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM

私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆

HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AM

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

See all articles