我眼中的margin和padding-創(chuàng)新互聯(lián)

俗話說得好，一千個小怪獸里眼里就有一千個凹凸曼，一千個碼農(nóng)眼中的padding和maigin就有一千個。對于剛?cè)胄械摹宿r(nóng)’鄙人來說對于padding和margin著兩個元素來說也有一些小的見解，做一分享，歡迎探討。
1.padding和margin的自我介紹。
     padding指的是自身邊框到內(nèi)邊框的距離，簡稱內(nèi)邊距。
     margin值得是自身邊框到外邊框的距離，簡稱外邊距。
     懂了嗎？懂了嗎？……什么？沒懂！  
     沒事，我也沒懂。好了，文字說不清楚咋們上圖!
![](https://s1.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（邊框）。沒錯，就是它，如圖外邊的藍(lán)色邊框（注意：在實例中邊框一般情況呈線狀，不可能有這么粗的邊框。）。
找到之后怎么辦？不怎么辦，想象，想象你就是那個邊框……我是邊框，我是邊框。好了，接下來我們尋找margin和padding。
margin。找到邊框，將邊框里邊的內(nèi)容擋住，從邊框往外找，找離它最近的邊框，它們之間的距離就是margin。
同理，padding。找到邊框，擋住外邊所有的東西，內(nèi)容的最外層與邊框的距離就是padding。
清楚了嗎？
還不清楚！好，那我們這樣想。我們把border比作一個房子，對，它現(xiàn)在是一個房子。既然是房子那肯定有圍墻吧，對，圍墻把房子圍了起來。再假設(shè)你在里邊睡大覺，
想象這個畫面！
這時，padding就是睡大覺的你（內(nèi)容）到房子的墻壁（border/邊框）的距離，margin就是房子的墻壁（border/邊框）到圍墻的距離。
懂了吧？再不懂打死你！
2.書寫格式。
    padding和margin都可以利用上下左右來調(diào)整盒子的大小。其書寫格式也分多種。
    （1）按個數(shù)分
    padding（margin）：5px;
    （從左往右數(shù)）
    它5px代表邊框的內(nèi)邊距或外邊距上下左右均為5個像素單位。
    padding（margin）：5px 5px;
    （從左往右數(shù)）
    第一個5px代表邊框的內(nèi)邊距或外邊距上下為5個像素單位。
    第二個5px代表邊框的內(nèi)邊距或外邊距左右為5個像素單位。
    padding（margin）：5px 5px 5px;
    （從左往右數(shù)）
    第一個5px代表邊框的內(nèi)邊距或外邊距上為5個像素單位。
    第二個5px代表邊框的內(nèi)邊距或外邊距左右為5個像素單位。
    第三個5px代表邊框的內(nèi)邊距或外邊距下為5個像素單位。
    padding（margin）：5px 5px 5px 5px;
    （從左往右數(shù)）
    第一個5px代表邊框的內(nèi)邊距或外邊距上為5個像素單位。
    第二個5px代表邊框的內(nèi)邊距或外邊距右為5個像素單位。
    第三個5px代表邊框的內(nèi)邊距或外邊距下為5個像素單位。
    第四個5px代表邊框的內(nèi)邊距或外邊距左為5個像素單位。
    （2）按方向分
        padding（margin）-left（right/top/bottum）：5px ;
        它值得是內(nèi)邊距或外邊距的左邊距或右邊距或上邊距或下邊距距離為5個單位像素。
        3.注意事項
            （1）重疊
            當(dāng)我們同時給相鄰的兩個個元素設(shè)置邊距，一般距離大的會覆蓋距離小的，并不是疊加。
            舉例如下：
            <!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>

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括崇禮網(wǎng)站建設(shè)、崇禮網(wǎng)站制作、崇禮網(wǎng)頁制作以及崇禮網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，崇禮網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到崇禮省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

</body>
</html>
效果圖如下：
我眼中的margin和padding
我給紅色和藍(lán)色均設(shè)置了margin值，紅色下邊距20px,藍(lán)色上邊距50px。我們可以看到。他們的間距只有50px。并不是70px。所以說大的一般會覆蓋小的，并非疊加。
（2）取值
在不同的瀏覽器中，他們兩個的取值也不相同，所以我們在優(yōu)化的時候就要考慮到瀏覽器的兼容性了。
取值如圖：
我眼中的margin和padding
最后說一點(diǎn)，padding不可以取負(fù)值，但margin可以取負(fù)值。但考慮到優(yōu)化，取負(fù)值的時候盡量小心。
今天就說到這里，歡迎大家指導(dǎo)！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：我眼中的margin和padding-創(chuàng)新互聯(lián)
鏈接地址：http://www.rwnh.cn/article26/ceiijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、App設(shè)計、Google、網(wǎng)站設(shè)計公司、全網(wǎng)營銷推廣、網(wǎng)站導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

我眼中的margin和padding-創(chuàng)新互聯(lián)