首頁 > web前端 > css教學 > css margin屬性怎麼用? css margin屬性用法教學

css margin屬性怎麼用? css margin屬性用法教學

云罗郡主
發布: 2018-11-07 14:14:12
原創
8516 人瀏覽過

在css中,有一個重要的屬性margin,很多人都不知道css margin屬性是什麼?怎麼用,以下為您總結一下css margin屬性用法教學。

css margin屬性怎麼用? css margin屬性用法教學

margin是css用於在一個聲明中,對所有css margin屬性的簡寫,正因為margin來控制css中的區塊級元素之間的距離,所以兩者是不是可見的。 【推薦學習:CSS3教學

一:css margin屬性怎麼用

margin屬性包含了很多的屬性,如下:

margin left :是表示設定距左內邊距;

margin top:是表示設定頭頂元素塊狀的距離;

margin right:是表示設定距右元素塊距離;

margin bottom :是表示設定底部塊狀距離

二:css margin屬性用法教學

##1.margin left用法:

margin left:50px;語法後面緊跟著數字或百分比,語法表示距離左邊元素塊50像素點,或距離元素50%的距離。

為了觀察實例,我們使用兩個盒子:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>margin-left实例 www.divcss5.com</title> 
<style> 
.php-a,.php-b 
{float:left; width:150px; height:120px; border:1px solid #F00} 
.php-b{ margin-left:50px} 
.php-c{ margin-left:50px} 
</style> 
</head> 
<body> 
<div class="php-a"></div> 
<div class="php-b"></div> 
</body> 
</html>
登入後複製

我們可以改動數值,可以觀察其中變化,但是效果都是元素左邊間距的位置大小。

2.margin right用法恰恰和margin left相反,定義為右邊元素距離多少像素。

3.margin top:50px,語法後面跟著數字,就是表示上邊間距50個像素點,也可以使用百分比來表示。

4.margin bottom用法和margin top用法類似,並且在方向是相反的。

假如我們想在上下左右都用margin:10px來表示,margin我們要按照順時針轉法的思維就好了。 【推薦閱讀:

margin:auto屬性的用法詳解

#以上就是對css margin屬性怎麼用? css margin屬性用法教學的完整介紹,如果您想了解更多有關CSS3影片教學課程,請關注PHP中文網。


以上是css margin屬性怎麼用? css margin屬性用法教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板