HTML CSS－margin和padding的學習

你在學習margin和padding的時候是不是懵了，－－什麼他娘的內邊距，什麼他娘的外邊距 。呵呵呵，剛開始我也有點不理解，後來透過查資料學習總算弄明白了，現在我來談一下自己對margin和padding的理解：

        一、什麼是邊距

        CSS中的邊距指的是目前元素border與周圍其它元素border的距離（或稱為空間）。

       二、什麼是內邊距，什麼是外邊距

        代碼2-1：

8. #html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

   >

9. 
   

html

 xmlns
10. =

    "http://www. w3.org/1999/xhtml"

>
12. #    

#head

13. > ;

14. 
            

15. meta

     

    http-equiv
=
16. "Content-type"

     content=

    "text/html; charset=UTF-8"
 
17. />

        

22. 
    

    ##H早期之一之一#
23. style

     

    type
=
24. "text/css"
    >

27. ##########################################################################################################################################################################################' ##            body{  ############            )  }  ################## ##########            .test1{  ############                      height:150px;  ########################################################################################### #######                border:6px solid red;  ######### ###            .test2{  ############                         ###padding-top## #:40px;  ############                width:150px;  ###  ############                border: 6px solid gray;  ############            }  ########努#########                width:80px;  ############                     border:12px solid blue;  ################# #########            }  ####

28.         style>

29.     #    ##

head

30. >#    

body

31. #> ;        # class#="test1">test1

p

32. >        ##        #p

     
class
33. =

    "test2"#>            #p class="test2_son">

    test2_son

34. #p>

            

35. p#>

    #    

36. body>

html
>

#1#說明：圖01中灰色地帶是class值為test2的p的邊框，它是有寬度的；        ①、外邊距：外邊距指的是margin作用元素（這裡是class值為test

2

的p）邊框外延距離另一個元素邊框外延（如果另一個元素和margin作用元素同級（這裡是class值為test

1的p））或內延（若另一個元素是margin作用元素父級）的距離，如上圖；        ②、內邊距：內邊距指的是margin作用元素（這裡是class值為test2的p）邊框內延距離其子元素邊框外延的距離，如上圖；        ③、內邊距和外邊距是針對於其作用的元素和其他元素來講的，某一元素的內邊距在另一個元素看來有可能是外邊距，例如：class值為test2

#p的內邊距在class值為test2_test p元素看來就是外邊距，所以上面程式碼也可以這樣寫：將class值為test
2

的p樣式清單中「padding-top:40px;」去掉，class值為test2_test p元素加上「margin-top:40px;」－這樣的效果和程式碼2-1是一樣的；

三、margin和padding的
屬性

值

        ①、它們的預設值都是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；###

                                      中值

#                      總結：無論是margin或padding，如果有4個屬性值，那麼它們的作用方向

順時針  依序為上、右、下、左；
#                b、margin有3個屬性值(例如margin:10px 5px 15px ;)，其意義為：上外邊距10px、右外邊距與左外邊邊距為15px、下外邊距#15px

#                      padding有3個屬性值(例如padding:10px 5px 15px;)，其意義為：上內邊距10px、右內邊距和左內邊距5px、10px、右內邊距和左內邊距5px、1pxpx

                      摘要：無論是margin或padding，如果有3個屬性值，那麼它們的作用方向

順時針

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

             pad  10px 5px;)，其意義為：上方內邊距與下內邊距10px、右內邊距及左內邊距5px;                      總結：無論是有mar2或padding值，那麼它們的作用方向

順時針

  依序為上下、右左；

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

                      paddingding                 paddingding  時(例如padding:10px;)，其意義為 4 個內邊距為 10p；無論是margin還是padding，如果有1個屬性值，那麼它們的邊距值都是相等的；

以上是HTML CSS－margin和padding的學習的詳細內容。更多資訊請關注PHP中文網其他相關文章！