iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 12
1
Modern Web

HTML 與 CSS 學習筆記系列 第 12

Day12 - HTML 與 CSS (3) - Box Model

margin 與 padding

補充昨日的資訊,可以在 chrome 的開發者模式看到一個 Box,其實會隨著各個區塊的設定而有不同,就搭配程式碼與顯示,比較一下差別吧!

CSS

.box1 {
    border: 10px solid gray;
    margin-left: 20px;
    /* margin-bottom: 20px; */
    /* padding-left: 10px; */
    /* padding-bottom: 10px; */
}

.box2 {
    border: 10px solid gray;
    margin-left: 10px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-bottom: 50px;
}

.box3 {
    border: 10px solid gray;
    margin: 20px;
    padding: 10px;
}

  • 一次寫上四邊的設定可以依照上右下左的方式依序填寫,也就是順時針的方式進行設定
  • 如果上下相同與左右相同,則可省略成 2 組,如果全部相同,就只要寫 1 組就可以了(一開始寫的模式)
h1 {padding: 5px 10px 15px 20px;}
h1 {padding: 10px 20px;}
h1 {padding: 10px;}

Box Model (盒模型)

  • 計算方法:預設的寬 (width)或高 (height) + padding + border
  • margin 不計算在內喔!可以觀察剛剛上面 Chrome 顯示的 Box, border 外的框是實線,但是 margin 外的框卻是虛線喔

因此,假設寬高設定如下,上面的 box1box2box3 的 Box Model 會是多少呢?

{
    width: 100px;
    height: 100px;
}

box1:120 w x 120 h
box2:135 w x 170 h
box3:140 w x 140 h

臨時測試

昨日的測試答案:類別標籤的話,style 前面要有一個 .,有發現嗎?

.style{
    color: blue;
}

參考資料

次回

說明如何置中對齊


上一篇
Day11 - HTML 與 CSS (2) - 選擇器、margin、padding
下一篇
Day13 - HTML 與 CSS (4) - 水平置中、box-sizing
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言