控制視窗與Stack之間的Layout邊界屬性
給於肝肝工程師小額捐款: ETH/ERC20
在我們剛開始寫CSS 的時候,我常常把Margin 與Padding 搞混
藉由這次機會, 我在這邊隨手做紀錄一下。
首先, 這張圖片裡面, 各種結構+屬性關係先弄熟!
參考: Margin and Padding – Xamarin | Microsoft Docs
範例測試
HTML
先用2個 Block 去強化這個概念
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”CSS/BoxModel.css”>
<script src=”JS/undefined_Notdefined.js”></script>
<title>BoxModel</title>
</head>
<body>
<h1>實作盒模型</h1>
<div class =”box 1″>
<p>
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class =”box 2″>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
CSS
.box {
display: inline-block;
width: 300px;
height: 300px;
background: black;
margin-top:20px ;
margin-left: 20px;
margin-bottom: 30px;
margin-right:30px;
font-size:25px;
color: azure;
padding: 70PX;
border: 25px solid rgb(243, 18, 18)
}
CSS_用Margin 來玩玩
Margin-top
接下來, 我們將Margin-top = 20px 顯示出來
CSS_Margin-left
Margin-left =20px
意思是指:
以每個Stack (每個box 1, box 2)為主的邊界, 向右邊推20px。
CSS_Padding 傻傻搞不清楚?
1.若你的元素<div class=box > = Stack 並沒有去限制 width的話 : 就可以用padding 向外推出去。
- 有時候不一定要將Stack. width限制常數, 可以善用padding向外部推喔。
2.反之, padding 加大的話, 會怎麼樣??
Stack. width沒有限制常數
{box padding =0px
{box padding=70px
你會發現, <p>元素與border之間的空間變大了
這個時候要請出排版結構圖 (汗
Stack. width有限制常數情況下
container.width= 400px
讓我們把box.padding數值改成 120px 試試看。
box.padding=120px
結果: box.Padding 仍可以把Stack 向外推!
結論
這個部分, 是對於我這個一邊工作一邊紀錄的金魚腦
很難短時間記清楚這些東西, 所下得一些功夫+解析
程式難在於…. 每個領域的用途差之甚遠
希望有看到這篇文章的各位有所幫助!