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 でトランスフォーム グラデーション属性を使用する方法
以上がWebページ制作におけるマージントップのチュートリアル例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
