简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

網頁製作中margin-top的實例教程

php中世界最好的语言
發布： 2017-12-01 14:44:09
原創
2753 人瀏覽過

在HTML裡，margin-top是設定該物件的距離與上一個物件的間距，他是設定物件邊框以外間距距離css樣式。今天就來帶大家好好認識一下margin-top

margin-top語法

.div{margin-top:10px} 

設定了物件「.div」上邊間距為10px

相關教學：margin

二、margin-top應用實例

為了觀察效果，實例設定3個DIV盒子，均設定相同的寬度、相同高度、相同css邊框，對第二個div層設定margin-top:10px;對第三個div層設定margin-top:20px，觀察效果掌握margin-top樣式作用。三個物件層分別DIV class命名為“.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中文網其它相關文章！

相關閱讀：

 Css3中的transform 漸層屬性怎麼使用

Css3製作動態開關的效果的實作步驟

CSS3中動畫技術的實作步驟

#

以上是網頁製作中margin-top的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
教學 網頁製作
來源：php.cn
上一篇：用CSS3製作倒影的實作步驟 下一篇：CSS父級子級怎麼用
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？ 我有以下CSS程式碼，它是我正在開發的網站中使用的更大CSS程式碼的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content...
來自於 2024-04-06 20:41:51
0
1
518
解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...
來自於 2024-04-06 20:22:15
0
1
454
顯示隱藏的側邊面板：選中 我希望在側面板中有一個導航選單，可以透過動畫漢堡選單切換到視圖。我想僅使用CSS創建它，而不使用任何JS。 :checked偽類似乎是可行的方法，但我無法讓它工作。到目前為止我擁有...
來自於 2024-04-06 15:49:33
0
1
319
導覽列上的CSS底部邊框 我有一個導航欄，當懸停列表中的任何項目時，我在底部添加了一條紅線，但我想將該紅線移到標題下方（例如“服務”），知道如何實現此目的？我在codepen中新增了一個小範例，以便您可以輕...
來自於 2024-04-06 15:04:41
0
2
347
父級的填充被黏性定位的子級忽略 如何防止黏性元素進入標題後面？當前程式碼片段在父級上使用填充頂部，我也嘗試在額外的子級上使用margin-top或透明50px邊框，但它似乎不起作用。我知道在這種情況下我可以輕鬆地...
來自於 2024-04-06 11:42:51
0
1
338
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！