我眼中的margin和padding

時間 2020-08-07

標籤眼中 margin padding 欄目 CSS 简体版

原文原文鏈接

俗話說得好，一千個小怪獸裏眼裏就有一千個凹凸曼，一千個碼農眼中的padding和maigin就有一千個。對於剛入行的‘菜農’鄙人來講對於padding和margin着兩個元素來講也有一些小的看法，作一分享，歡迎探討。
1.padding和margin的自我介紹。
     padding指的是自身邊框到內邊框的距離，簡稱內邊距。
     margin值得是自身邊框到外邊框的距離，簡稱外邊距。
     懂了嗎？懂了嗎？……什麼？沒懂！  
     沒事，我也沒懂。好了，文字說不清楚咋們上圖!
![](https://s4.51cto.com/images/blog/201804/19/61575294cc219c00f98468b3f90c09bc.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
要肯定什麼是margin，什麼是padding，咱們首先要找的不是margin，也不是padding，而是border（邊框）。沒錯，就是它，如圖外邊的藍色邊框（注意：在實例中邊框通常狀況呈線狀，不可能有這麼粗的邊框。）。
找到以後怎麼辦？不怎麼辦，想象，想象你就是那個邊框……我是邊框，我是邊框。好了，接下來咱們尋找margin和padding。
margin。找到邊框，將邊框裏邊的內容擋住，從邊框往外找，找離它最近的邊框，它們之間的距離就是margin。
同理，padding。找到邊框，擋住外邊全部的東西，內容的最外層與邊框的距離就是padding。
清楚了嗎？
還不清楚！好，那咱們這樣想。咱們把border比做一個房子，對，它如今是一個房子。既然是房子那確定有圍牆吧，對，圍牆把房子圍了起來。再假設你在裏邊睡大覺，
想象這個畫面！
這時，padding就是睡大覺的你（內容）到房子的牆壁（border/邊框）的距離，margin就是房子的牆壁（border/邊框）到圍牆的距離。
懂了吧？再不懂打死你！
2.書寫格式。
    padding和margin均可以利用上下左右來調整盒子的大小。其書寫格式也分多種。
    （1）按個數分
    padding（margin）：5px;
    （從左往右數）
    它5px表明邊框的內邊距或外邊距上下左右均爲5個像素單位。
    padding（margin）：5px 5px;
    （從左往右數）
    第一個5px表明邊框的內邊距或外邊距上下爲5個像素單位。
    第二個5px表明邊框的內邊距或外邊距左右爲5個像素單位。
    padding（margin）：5px 5px 5px;
    （從左往右數）
    第一個5px表明邊框的內邊距或外邊距上爲5個像素單位。
    第二個5px表明邊框的內邊距或外邊距左右爲5個像素單位。
    第三個5px表明邊框的內邊距或外邊距下爲5個像素單位。
    padding（margin）：5px 5px 5px 5px;
    （從左往右數）
    第一個5px表明邊框的內邊距或外邊距上爲5個像素單位。
    第二個5px表明邊框的內邊距或外邊距右爲5個像素單位。
    第三個5px表明邊框的內邊距或外邊距下爲5個像素單位。
    第四個5px表明邊框的內邊距或外邊距左爲5個像素單位。
    （2）按方向分
        padding（margin）-left（right/top/bottum）：5px ;
        它值得是內邊距或外邊距的左邊距或右邊距或上邊距或下邊距距離爲5個單位像素。
        3.注意事項
            （1）重疊
            當咱們同時給相鄰的兩個個元素設置邊距，通常距離大的會覆蓋距離小的，並非疊加。
            舉例以下：
            <!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style >
#red{
width: 100px;
height: 100px;
background-color: red;
margin-bottom:20px ;
}
#blue{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 50px;
}
</style >
<body>
<div id="red"></div>
<div id="blue"></div>html

</body>
</html>
效果圖以下：

我給紅色和藍色均設置了margin值，紅色下邊距20px,藍色上邊距50px。咱們能夠看到。他們的間距只有50px。並非70px。因此說大的通常會覆蓋小的，並不是疊加。
（2）取值
在不一樣的瀏覽器中，他們兩個的取值也不相同，因此咱們在優化的時候就要考慮到瀏覽器的兼容性了。
取值如圖：

最後說一點，padding不能夠取負值，但margin能夠取負值。但考慮到優化，取負值的時候儘可能當心。
今天就說到這裏，歡迎你們指導！瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。