html 盒子模型基礎（內聯元素的盒模型）（二）
阿新 • • 發佈：2019-01-06
1.內聯元素的盒子模型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1 { width: 100px; height: 100px; background-color: yellowgreen; } .s1 { /*設定背景顏色*/ background-color: yellow; /*設定寬和高*/ /*width: 100px; height: 100px;*/ /* 內聯元素不支援設定寬和高， 內聯元素元素的大小由內容決定 * */ /* 設定元素的內邊距 內聯元素支援水平方向的內邊距 內聯元素可以設定垂直方向的內邊距，但是不會影響佈局 * */ padding-left: 100px; padding-right: 100px; /*padding-top:50px ; padding-bottom: 50px;*/ /* 設定元素邊框 支援水平方向的邊框，也可以設定垂直方向的，但是垂直方向的不會影響佈局 * */ /*border: 20px solid red;*/ /*設定元素的外邊距 內聯元素支援水平方向的外邊距 , 不支援垂直方向的外邊距 * */ margin-left: 100px; margin-right: 100px; margin-top: 10000px; margin-bottom: 10000px; } .s2{ background-color: green; } </style> </head> <body> <div class="box1"></div> <span class="s1">我是一個span</span><span class="s2">我是一個span</span> <div class="box1"></div> </body> </html> </html>
效果：
