Follow Fang!: CSS Box Model

2013/08/19

CSS Box Model

CSS在排版上有一個很重要的觀念就是Box Model

Box Model在我看來就是一個盒子，間隔多少(Margin)，邊界設計什麼樣式(Border)，內容物與邊界要間隔多少(Padding)

Margin語意是相差，與邊界相差多遠
Border語意是邊界，邊界設計可以在此設計
Padding語意填充，則是需要與中間物填充多少東西去區隔

<!DOCTYPE html>

<html lang="zh-tw">
    <head>
        <meta charset="utf-8" />
        <title>盒子模式</title>
    </head>
    <body>
        <style type="text/css">
            body {
                background: grey;
            }
            
            #div1 {
                color: gold;
                font-size: 20px;
                margin-top: 20%;
                margin-bottom: 10%;
                margin-left: 10%;
                margin-right: 10%;
                border-color: skyblue;
                border-style: solid;
                border-width: 5px;
                padding-top:20px; 
                padding-bottom:100px; 
    padding-left:500px; 
    padding-right:0px; 
            }
        </style>
        <div id="div1">
            Test
        </div>
    </body>
</html>

資料參考：
http://www.1keydata.com/css-tutorial/tw/margin.php
http://www.quackit.com/css/properties/css_border-color.cfm
http://www.w3.org/TR/CSS2/box.html
http://blog.kkbruce.net/2009/10/css-margin.html#.UhHlzJIweqg
http://pinkyvivi.pixnet.net/blog/post/1131260