本帖最後由 陳育霖 於 2023-8-29 01:07 編輯
margin 外邊距、border 邊框、padding 內邊距、content box 內容盒子
content box可以為圖片、標題(h1-h6)、段落(p)、區塊(div)等
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Box Model 範例</title>
- <style>
- /* 樣式設定 */
- .box {
- width: 200px;
- height: 100px;
- border: 5px solid #333;
- background-color: #f4f4f4;
- display: inline-block;
- }
- .content {
- background-color: #ffd700;
- }
- .border {
- border: 100px dashed #87cefa;
- }
- .padding {
- background-color: #90ee90;
- padding: 100px;
- }
- .margin {
- background-color: #ff69b4;
- margin: 100px;
- }
- .box-container {
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div class="box-container">
- <div class="box content">內容區塊</div>
- <div class="box border">邊框區塊</div>
- <div class="box padding">內邊距區塊</div>
- <div class="box margin">外邊距區塊</div>
- </div>
- </body>
- </html>
複製代碼 |