- margin : 調整邊界 (往外推)
- padding : 調整內距 (往內推)
例子：我們有一個div，div裡面有一個p段落,
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <p>內容</p> </div> </body> </html>
CSS
.container{
border: 2px solid red;
width: 300px;
height: 100px;
}
1) 從瀏覽器看到的結果。
2) 內容太接近邊界，我們希望將內容往右推20px但紅色框不要移動, 這時候我們就要用padding,
CSS
3) 如果我們要移動紅色框，可以使用margin. 舉例我們要將整個紅色框往下調20px;
CSS
CSS
.container{
border: 2px solid red;
width: 300px;
height: 100px;
padding-left: 20px;
}
3) 如果我們要移動紅色框，可以使用margin. 舉例我們要將整個紅色框往下調20px;
CSS
.container{
border: 2px solid red;
width: 300px;
height: 100px;
padding-left: 20px;
margin-top : 20px;
}
沒有留言:
張貼留言