今天講一下 margin 和 padding,這兩個是非常重要的基本,幾乎所有網頁調整都會需要用到。
* {
border: 1px solid black;
}
.card {
width: 400px;
padding: 20px;
}
.card-img {
width: 100%;
}
外面綠色這圈就是 padding,padding 的功用是對內留白,而 margin 是區塊對區塊的距離,橘色的都是 margin,不過我明明沒有設定 margin 為甚麼會有 margin,因為很多瀏覽器都會幫我們預設好許多 CSS,所以才會出現這些狀況,通常我們出錯或是找一些問題所在,會使用原始碼檢測器,就在網頁上按 F12 就會出現這個。
按左上角的選擇工具,然後可以點選你要的部分,他就會出現一些相關資訊。
可以自己先玩玩看,當時碰到還蠻又驚又喜XDD,學會這工具真的很重要,我每次要除錯都是這樣找,慢慢從程式碼找真的太難了。
可以先自己摸索一下我們下集待續~