CSS 教學 | css margin
主要問題:常常margin-top失效,造成版面的外間距壞掉的問題?在網頁編排的時候,最常用到的動作就是調整文字元素或圖片元素的間距,要文字下來一點、過去一點、左邊一點…尤其,有時遇到自稱從小就學過美工的老版時,見一次調整一次,再見一次又再調整一次….就當作是練身體一樣,每每都弄到讓咱們網頁設計師在心裡狂翻桌。margin-top失效這個問題主要是由於W3C的標準規則所告成的,W3C規定在第一個子物件使用margin-top的時候,會被父層物件拿去用,例如當
主要問題:常常 margin-top 失效,造成版面的外間距壞掉的問題?
在網頁編排的時候,最常用到的動作就是調整文字元素或圖片元素的間距,要文字下來一點、過去一點、左邊一點… 尤其,有時遇到自稱從小就學過美工的老版時,見一次調整一次,再見一次又再調整一次….就當作是練身體一樣,每每都弄到讓咱們網頁設計師在心裡狂翻桌。
margin-top 失效這個問題主要是由於 W3C 的標準規則所告成的,W3C 規定在第一個子物件使用 margin-top 的時候,會被父層物件拿去用,例如當 <DIV> 裡面的第一段文字使用 margin-top 的時候,我們所預期的上間距效果不會出現在第一段文字上面,反而是父層的<DIV> 產生了上間距。同理,W3C 的標準規則在最後一個子物件使用 margin-bottom 的時候,會被父層物件拿去用!
因此,還常常有人在網路上搜尋「CSS 失控的 margin top 」呢!哈哈哈哈哈…
使用 margin-top 外間距調整文字元素或圖片元素的外間距,理所當然是要使用 margin 語法,然而,當我們高高興興完成網頁排版,心想趕快收拾包包下班走人時,慘劇往往就發生在各個瀏覽器的不一致問題之中,想下班~ 先搞定每個瀏覽器再說吧~ TT
Step 1
我們使用一個 <div> 然後在裡面放了 <h2> 和 <h5> 兩段文字,範例如下圖所示 ↓
Step 2
開啟一個 CSS 檔,為 div 寫上寬度、高度和背景圖片,範例如下圖所示 ↓
Step 3
上面的 CSS 寫好之後,在 Dreamweaver 內看到的狀況還算正常,範例如下圖所示 ↓
Step 4
回到 CSS 再幫 <h2> 和 <h5> 兩段文字調整出我們需要的外間距大小,範例如下圖所示 ↓
第 12 行: 先使用 margin:0; 把原本容易造成誤差的預設間距設為 0 ,如此比較容易在各瀏覽器得到相同的結果。
HTML 標籤的...
取得本站獨家住宿推薦 15%OFF 訂房優惠
CSS∥排版觀念
主要也是研究Margin、Padding、Border和每一塊區塊的長寬間的關係。 只要位置抓對了,版面的編排千變萬化呢。 CSS 排版有一個很重要的觀念: ...