ホームページ  >  記事  >  ウェブフロントエンド  >  Webページ制作におけるマージントップのチュートリアル例

Webページ制作におけるマージントップのチュートリアル例

php中世界最好的语言
php中世界最好的语言オリジナル
2017-12-01 14:44:092807ブラウズ

HTMLでは、margin-topはオブジェクトと前のオブジェクトの間の距離を設定することです。オブジェクトの境界線の外側の間隔距離のCSSスタイルを設定します。今日は、margin-top

margin-top 構文について説明します

.div{margin-top:10px}

オブジェクト ".div" の上部の間隔を 10px に設定します

関連チュートリアル: margin

II、margin-top アプリケーション例

効果を観察するために、この例では 3 つの DIV ボックスを設定します。すべて同じ幅、同じ高さ、同じ CSS 境界線を 2 番目に設定します。 div レイヤー; 3 番目の div に margin-top:20px を設定し、その効果を観察し、margin-top スタイルの効果を理解します。 3 つのオブジェクト レイヤーの名前は、DIV クラス「.div1」「.div2」「.div3」です。

サンプルの完全な HTML+CSS コード

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>margin-top在线实例</title> 
<style> 
.div1,.div2,.div3{ width:300px; height:80px; border:1px solid #F00} 
/* css 注释说明:设置三对象相同宽度 高度 红色边框 */ 
.div2{ margin-top:10px}/* css注释说明:设置对象距离上对象10px间距 */ 
.div3{ margin-top:20px}/* div css注释说明:设置对象距离上对象20px间距 */ 
</style> 
</head> 
<body> 
<div class="div1"></div> 
<div class="div2"></div> 
<div class="div3"></div> 
</body> 
</html>

margin-top は、オブジェクトが設定されていない場合にオブジェクトの距離を設定します。背景、境界線はpadding-topで置き換えることができます。


これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

Css3 でトランスフォーム グラデーション属性を使用する方法

Css3 で動的スイッチの効果を実装する手順

CSS3 でアニメーション テクノロジを実装する手順

以上がWebページ制作におけるマージントップのチュートリアル例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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