自學日記

學習程式相關知識及學習法

0%

CSS 區塊尺寸計算

發表於 更新於

CSS 區塊尺寸計算

關於 width、border、padding、margin等尺寸計算

盒模型

所謂width : ? px

width為寬度，而一般撰寫時設定width等於多少px
以下資料來源於Amos金魚鐵人賽的說明畫面，以width: 300px舉例，如圖顯示內容寬300px:

boder : ? px

boder為邊線，同樣畫面來源Amos金魚鐵人賽的說明畫面，以border: 10px舉例，如圖顯示為320px,左右(邊線)各10px:

padding : ? px

padding為間距，畫面來源Amos金魚鐵人賽的說明畫面，以padding: 20px舉例，如圖顯示為360px，左右間距各20px:

margin : ? px

margin為div之間的間距，畫面來源Amos金魚鐵人賽的說明畫面，以margin: 20px舉例，先行設定 margin: 0;padding: 0;(CSS reset)，再設定margin: 20px;結果寬為 400px，margin為看不到的佔據空間:

實際範例說明

以上說明完基本盒模型後，以實際code進行說明，父層與子層的寬度調整順序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
<style>
        .box {
            width: 600px;
            margin: auto;
        }

        .column {
            /* 原本設置200px，200px*3=600px沒問題，
             * 但設置magin&padding&border後，多出來的佔據空間導致子層三個column寬度
             * 相加超過父層的600px，因此子層寬度剪掉三個屬性的兩邊數值
             * :200-(10*2)-(10*2)-(1*2)=158px */
            width: 158px;
            margin: 10px;
            padding: 10px;
            border: 1px ;
        }
    </style>
    <div class="box"></div>
        <div class="column">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error a animi dolorum enim distinctio odio consequatur aut sed ratione neque similique quidem officia, voluptatibus, culpa placeat eius libero quam deleniti.
        </div>
        <div class="column">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error a animi dolorum enim distinctio odio consequatur aut sed ratione neque similique quidem officia, voluptatibus, culpa placeat eius libero quam deleniti.
        </div>
        <div class="column">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error a animi dolorum enim distinctio odio consequatur aut sed ratione neque similique quidem officia, voluptatibus, culpa placeat eius libero quam deleniti.
        </div>
</body>

在上方code我們先設定父層(box)的寬度，後設定子層column的寬度，依後續設定的屬性值，再去做相減(參考code內容的註解)，以符合子層寬度等於父層寬度。