HTML CSS——margin和padding的學習

時間 2019-12-11

標籤 html css margin padding 學習欄目 HTML 简体版

原文原文鏈接

你在學習margin和padding的時候是否是懵了，——什麼他孃的內邊距，什麼他孃的外邊距。呵呵呵，剛開始我也有點不理解，後來經過查資料學習總算弄明白了，如今我來談一下本身對margin和padding的理解：css

1、什麼是邊距html

CSS中的邊距指的是當前元素border與周圍其它元素border的距離（或者稱爲空間）。瀏覽器

2、什麼是內邊距，什麼是外邊距
學習

代碼2-1：ui

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
}
.test1{
width:150px;
height:150px;
border:6px solid red;
}
.test2{
margin-top:40px;
padding-top:40px;
width:150px;
height:150px;
border:6px solid gray;
}
.test2_son{
width:80px;
height:50px;
border:12px solid blue;
}
</style>
</head>
<body>
<div class="test1">test1</div>
<div class="test2">
<div class="test2_son">test2_son</div>
</div>
</body>
</html>

圖01

說明：圖01中灰色地帶是class值爲test2的div的邊框，它是有寬度的；spa

①、外邊距：外邊距指的是margin做用元素（這裏是class值爲test2的div）邊框外延距離另外一個元素邊框外延（若是另外一個元素和margin做用元素同級（這裏是class值爲test1的div））或內延（若是另外一個元素是margin做用元素父級）的距離，如上圖；xml

②、內邊距：內邊距指的是margin做用元素（這裏是class值爲test2的div）邊框內延距離其子元素邊框外延的距離，如上圖；
htm

③、內邊距和外邊距是針對於其做用的元素和其餘元素來說的，某一元素的內邊距在另外一個元素看來有多是外邊距，好比：class值爲test2 div的內邊距在class值爲test2_test div元素看來就是外邊距，因此上面代碼也能夠這樣寫：將class值爲test2的div樣式列表中「padding-top:40px;」去掉，class值爲test2_test div元素添加「margin-top:40px;」——這樣的效果和代碼2-1是同樣的；繼承

3、margin和padding的屬性值
it

①、它們的默認值都是0；它們的屬性值均可覺得auto——margin做用的元素由瀏覽器計算外邊距，padding做用的元素由瀏覽器計算內邊距；都可經過設定屬性值爲inherit而繼承父元素邊距——margin繼承父元素外邊距，padding繼承父元素內邊距，但因爲inherit在任何的版本的 Internet Explorer （包括 IE8）都不支持，因此也就沒有學習的必要了。

②、margin容許指定負的外邊距值，不過使用時要當心；padding不容許指定負邊距值；

③、margin和padding的屬性值均可以有1個、2個、3個和4個：

a、margin有4個屬性值(例如margin:10px 5px 15px 20px;)，其含義是：上外邊距10px、右外邊距5px、下外邊距15px、左外邊距20px；

padding有4個屬性值(例如padding:10px 5px 15px 20px;)，其含義是：上內邊距10px、右內邊距5px、下內邊距15px、左內邊距20px；

總結：不管是margin仍是padding，若是有4個屬性值，那麼它們的做用方向順時針依次爲上、右、下、左；

b、margin有3個屬性值(例如margin:10px 5px 15px ;)，其含義是：上外邊距10px、右外邊距和左外邊距5px、下外邊距15px；

padding有3個屬性值(例如padding:10px 5px 15px;)，其含義是：上內邊距10px、右內邊距和左內邊距5px、下內邊距15px；

總結：不管是margin仍是padding，若是有3個屬性值，那麼它們的做用方向順時針依次爲上、右左、下；

c、margin有2個屬性值(例如margin:10px 5px;)，其含義是：上外邊距和下外邊距10px、右外邊距和左外邊距5px；

padding有2個屬性值(例如padding:10px 5px;)，其含義是：上內邊距和下內邊距10px、右內邊距和左內邊距5px；

總結：不管是margin仍是padding，若是有2個屬性值，那麼它們的做用方向順時針依次爲上下、右左；

d、margin有1個屬性值(例如margin:10px;)，其含義是：4 個外邊距都是 10px；