html padding 和 margin
阿新 • • 發佈：2019-02-07
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的尺寸。
假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素，就需要將內容的寬度設定為 70 畫素
- element : 元素。
- padding : 內邊距，也有資料將其翻譯為填充。
- border : 邊框。
- margin : 外邊距，也有資料將其翻譯為空白或空白邊。
padding是程式碼的上下左右都同時加上所屬值，你也可以分別加上所屬值 比如左邊則為：padding-left 其具體用法如下： 定義和用法 padding 簡寫屬性在一個宣告中設定所有內邊距屬性。 說明 這個簡寫屬性設定元素所有內邊距的寬度，或者設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。 註釋：不允許使用負值。但是margin可以。例子 1 padding:10px 5px 15px 20px; 上內邊距是 10px 右內邊距是 5px 下內邊距是 15px 左內邊距是 20px 例子 2 padding:10px 5px 15px; 上內邊距是 10px 右內邊距和左內邊距是 5px 下內邊距是 15px 例子 3 padding:10px 5px; 上內邊距和下內邊距是 10px 右內邊距和左內邊距是 5px 例子 4 padding:10px; 所有 4 個內邊距都是 10px
關於圖片居中顯示的例子
1.使用margin padding
<html> <body> <div style="width:50%;height:120px;margin:100px 510px 0px;padding:100px 100px 0px;float:left"><img src="elephant.jpg"></div> <div style="width:100%;height:50px;float:left;text-align:center">大象</div> </body> </html>
2.使用多個div
<html> <body> <div style="width:100%;height:50%"></div> <div style="width:40%;height:200px;float:left;"></div> <div style="width:60%;height:200px;float:left;"><img src="elephant.jpg"> <div style="width:100%;height:200px;float:left;">大象</div> </div> </body> </html>