前端基礎---內聯元素的盒模型
阿新 • • 發佈：2021-06-30
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>內聯元素的盒模型</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: red; } p{ background-color: yellow; } /* 瀏覽器為了在頁面中沒有樣式時,也可以有一個較好的顯示效果 所以為很多元素都設定了一些預設的margin和padding 而他的這些預設樣式,正常情況下我們是不需要使用的. 所以我們往往在編寫樣式之前需要將瀏覽器中的預設的margin和padding統統的去掉*/ /* 清除瀏覽器預設樣式 */ *{ margin: 0; padding: 0; } .sp1{ background-color: green; /* 內聯元素不能設定寬高*/ width: 100px; height: 100px; /* 內聯元素可以設定水平內邊距 */ padding-left: 100px; padding-right: 100px; /* 內聯元素可以設定垂直方向內邊距,但是不會影響頁面的佈局 */ padding-top: 50px; padding-bottom: 50px; /* 內聯元素可以設定邊框,但是垂直的邊框不會印象頁面的佈局 */ border: 10px blue solid; /* 內聯元素支援水平方向的外邊距 水平方向的外邊距不會重疊,而是取合 */ margin-right: 100px; /* 內聯元素不支援垂直外邊距 */ margin-top: 10px; } .sp2{ /* 設定左邊距 */ background-color: green; margin-left: 100px; } </style> </head> <body> <span class="sp1">這是內聯</span> <span class="sp2">這是內聯</span> <div class="box"> </div> <p>這是p標籤</p> <p>這是p標籤</p> <p>這是p標籤</p> </body> </html>