有關於margin和padding的練習
阿新 • • 發佈：2017-10-10
itl tle 容器 tex -- gre set com order
---恢復內容開始---
margin指的是邊框與邊框之間的距離指的是容器外距離。padding指的是自身邊框到自身內部另一個容器邊框之間的距離指的是容器內距離。所以我進行了以下一個練習：
將三個顏色的色塊進行定義使其處於上一個色塊的正中間。我的代碼為：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>邊距練習</title> <style type="text/css"> /** { margin: 0 auto; }*/ #a1{ border: 1px solid gold; width: 500px; height: 500px; background-color: #000000; margin: 100px 100px 100px 50px ; } #a2{ border: 1px solid green ; width: 300px; height: 300px; background-color: red; margin: 99px 99px 99px 99px; } #a3{ border: 1px solid blue ; width: 100px; height: 100px; background-color: white; margin: 99px 99px 99px 99px; } </style> </head> <body> <div id="a1"> <div id="a2"> <div id="a3"> </div> </div> </div> </body> </html>
達到的效果圖是：
我認為這個可以用直觀的該訴我們padding和margin的區別。
---恢復內容結束---
有關於margin和padding的練習