CSSで余白を設定する方法

青灯夜游
リリース: 2023-01-06 11:13:01
オリジナル
12365 人が閲覧しました

CSS でマージンを設定する方法: 1. margin 属性を使用して、1 つのステートメントで要素のすべてのマージンを設定します; 2. margin-top、margin-bottom、margin-left、および margin-right を使用します。属性、要素の上下左右のマージンをそれぞれ設定します。

CSSで余白を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

1. マージン属性

margin 省略表記属性を使用して、1 つのステートメントですべてのマージン属性を設定します。この属性には 1 ~ 4 の値を指定できます。

#例:


margin:10px 5px 15px 20px;
ログイン後にコピー

    #上マージンは 10px
  • 右マージンは 5px
  • 下マージンは 15px
  • 左マージンは 20px
  • margin:10px 5px 15px;
    ログイン後にコピー
    上のマージンは 10px
  • 左右のマージンは 5px
  • 下マージンは 15px
  • margin:10px 5px;
    ログイン後にコピー
    上下の余白は 10px
  • 左右の余白は 5px
  • margin:10px;
    ログイン後にコピー
    すべて 4 各マージンは 10px
2. margin-top、margin-bottom、margin-left、および margin-right 属性を使用します

    margin-top: 要素の上マージンを設定します

  • #margin-bottom: 要素の下マージンを設定
  • margin-left: 要素の左マージンを設定します。
  • margin-right: 要素の右マージンを設定します。
  • 例:
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			div{
				border: 1px solid red;
			}
			.a1{
				margin-top: 10px;
			}
			.a2{
				margin-bottom: 10px;
			}
			.a3{
				margin-left: 10px;
			}
			.a4{
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div>测试文本</div>
		<div class="a1">测试文本</div>
		<div class="a2">测试文本</div>
		<div class="a3">测试文本</div>
		<div class="a4">测试文本</div>
		<div>测试文本</div>
	</body>

</html>
ログイン後にコピー

レンダリング:


(学習ビデオ共有: CSSで余白を設定する方法css ビデオ チュートリアル

)

以上がCSSで余白を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート