CSS margin屬性與用法教程

2021-08-17 08:29:32 字數 2082 閱讀 6341

margin屬性是css用於在乙個宣告中設定所有 margin 屬性的簡寫屬性,margin是css控制塊級元素之間的距離, 它們之間是透明不可見的。

margin屬性包含了margin left:距元素塊距離(設定距左內邊距) ;margin top:距頭頂(上)元素塊距離(設定距頂部元素塊距離);margin right:距右元素塊距離(設定距右元素塊距) ;margin bottom元素塊距離(設定距低(下)元素塊距)。其二維構建圖可見css屬性二維圖。

margin left用法:margin-left:10px;  這個意思距離左元素塊距10畫素,可跟百分比如(margin-left:10%;   距離左元素塊10%的距離)css margin-left教程;

margin right用法:margin-right:10px; 這個意思距離邊元素塊距10畫素,可跟百分比如(margin-right:10%; 距離邊元素塊10%的距離);

margin top用法:margin-top:10px; 這個意思距離邊元素塊距10畫素,可跟百分比如(margin-top:10%; 距離邊元素塊10%的距離)css margin-top;

margin bottom用法:margin-bottom:10px; 這個意思距離邊元素塊距10畫素,可跟百分比如(margin-bottom:10%; 距離邊元素塊10%的距離)css margin-bottom;

注意margin中間的鏈結「-」號,設定距離值時用「」並賦予值,並以「」結束,並且全部用小寫半形字母

如果是左右上下都需要設定margin的值時可以簡寫來實現,以優化css 。

如簡寫方式有:

margin:10px; 意思就是上下左右元素塊距離就是10px(10畫素)等於margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; 一樣效果簡寫;

margin:5px 10px; 意思上下元素塊距離為5px,左右的元素塊距離為10px,等於margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 一樣效果簡寫;

margin:5px 6px 7px; 意思上元素塊距離5px,下元素塊距離為7px,左右元素塊距離為6px,等於margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; 一樣效果簡寫; 

margin:5px 6px 7px 8px;  意思上元素塊為5px,右元素塊距離為6px ,下元素塊距離為7px,左元素塊距離8px,等於margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 一樣效果簡寫; 

CSS margin屬性與用法教程

margin屬性是css用於在乙個宣告中設定所有 margin 屬性的簡寫屬性,margin是css控制塊級元素之間的距離,它們之間是透明不可見的。margin屬性包含了margin left 距左元素塊距離 設定距左內邊距 margin top 距頭頂 上 元素塊距離 設定距頂部元素塊距離 mar...

CSS margin樣式屬性

charset utf 8 title span instyle head style border 1px solid red height 300px width 300px margin bottom 20px class in style background color black div...

CSS margin 屬性簡介

設定外邊距的最簡單的方法就是使用 margin 屬性。margin 屬性接受任何長度單位,可以是畫素 英吋 公釐或 em。margin 可以設定為 auto。更常見的做法是為外邊距設定長度值。下面的宣告在 h1 元素的各個邊上設定了 1 4 英吋寬的空白 h1下面的例子為 h1 元素的四個邊分別定義...