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

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

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

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 サイトの他の関連記事に注目してください。