網頁製作中margin-top的實例教程
- php中世界最好的语言原創
- 2017-12-01 14:44:092794瀏覽
在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中文網其它相關文章！
相關閱讀：
#以上是網頁製作中margin-top的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：用CSS3製作倒影的實作步驟下一篇：用CSS3製作倒影的實作步驟