CSS margin 邊界使用介紹範例教學 | css margin
cssmargin是用來設定邊界距離的一個重要語法,透過margin你可以設定各元素間的間距,margin是屬於外距,用法與padding內距不太一樣。你可以對單一邊界做設定,也可以一次設定四個邊界。margin-top:設定上邊界距離。margin-left:設定左邊界距離。margin-right:設定右邊界距離。margin-bottom:設定下邊界距離。如果四個邊界都要設定一樣的話,可以直接採用一個margin來代表四個邊界距離都相同margin的值margin可以的值有auto、長度單位與%,各種値應用範圍不一定相同margin:auto;//代表讓瀏覽器自己去設定。margin:長度單位;//就是...
css margin 是用來設定邊界距離的一個重要語法,透過 margin 你可以設定各元素間的間距,margin 是屬於外距,用法與 padding 內距不太一樣。你可以對單一邊界做設定,也可以一次設定四個邊界。margin-top:設定上邊界距離。margin-left:設定左邊界距離。margin-right:設定右邊界距離。margin-bottom:設定下邊界距離。如果四個邊界都要設定一樣的話,可以直接採用一個 margin 來代表四個邊界距離都相同margin 的值
margin可以的值有 auto、長度單位與 %,各種値應用範圍不一定相同
margin:auto; //代表讓瀏覽器自己去設定。margin:長度單位; //就是給數字跟單位,單位可以是 em、px、pt 等値。margin:%; //讓瀏覽器自己去設定,跟邊界元素有關。範例練習開啟程式碼頁面[2]
呈現結果
在這個範例中我們只設定了一個 margin,用以代表四個邊界都是一樣的,語法中的 border 指的是邊框,第一段文字的邊框設為 2px 以及藍色,第二段文字的邊框設為 2px 紅色,這樣比較容易看出兩個 div[3] 元素的差異。在第一段文字的 margin 設為 10px,所以他四個邊界外距都是 10px,主要兩個元素比較可以看到藍色邊框與紅色邊框有一段 10px 的距離。
css margin 簡短的寫法
也許有人會問,每次都分別對四個邊設定,那不就每次都要寫四次 margin,有夠累的啦!別擔心,其實有簡單的寫法唷!
margin:上邊界 右邊界 下邊界 左邊界;margin:上下邊界 左右邊界;請記住這個順序,上右下左,任何瀏覽器都是這樣判斷的,下面我們舉幾個例子來看看簡寫與全寫比較。Example A
margin:10px 20px 10px 20px;
等同於
margin-top:10px;margin-right:20px;margin-bottom:10px;margin-left:20px;
Example B
margin:20px 10px;
這代表的是上邊界與下邊界都是 20px,左右邊界都是 ...
取得本站獨家住宿推薦 15%OFF 訂房優惠
CSS∥排版觀念
主要也是研究Margin、Padding、Border和每一塊區塊的長寬間的關係。 只要位置抓對了,版面的編排千變萬化呢。 CSS 排版有一個很重要的觀念: ...