盒子模型（框模型）——外邊距
阿新 • • 發佈：2022-05-09
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型（框模型）——外邊距</title> <style type="text/css"> /* 外邊距 當前盒子和其他盒子之間的距離稱為外邊框，外邊框不會影響盒子的可見框大小 但外邊距會影響到盒子實際佔地的大小，影響盒子的位置 由於在瀏覽器中預設情況下，元素是靠左上排列的，所以設定左外邊距時，會移動元素 自身，而設定下和右外邊距時，會移動其他的元素 簡寫屬性 margin可以同時設定四個方向的外邊距*/ .box{ width: 700px; height: 700px; border: 2px red solid; } .box1{ width: 200px; height: 200px; border: solid yellow; margin: 10px 20px; }.box2{ width: 300px; height: 300px; border: solid; margin: 50px; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>