作者|李娜
*本文為「Java聯(lián)盟」原創(chuàng)內(nèi)容，轉(zhuǎn)載無需授權(quán)，請(qǐng)保留署名來源。
溫馨提示：細(xì)讀本文需要2分鐘，速讀僅需1分鐘。
吼吼吼李娜 又來給大家普及知識(shí)了！掌聲鮮花在哪里！！
內(nèi)邊距
盒子模型之
上一章我們講到?《盒子模型之 border》，那么下面要講的內(nèi)容是在（藍(lán)色區(qū)域）和邊框（border）之間存在的綠色部分——內(nèi)邊距padding
內(nèi)邊距就是內(nèi)容到邊框的距離。padding 屬性接受長(zhǎng)度值或百分比值（這里的百分比值是相對(duì)于父級(jí)的元素），但不允許使用負(fù)值。
源代碼示意圖：
執(zhí)行效果圖：
這是一個(gè)普通的div標(biāo)簽，現(xiàn)在我們?yōu)樗砑觾?nèi)邊距padding-top:50px;
效果圖：
（為了讓小伙伴們看的清楚，特意寫了一個(gè)對(duì)比部分）
通過圖片我們可以看出以下兩點(diǎn)：
1.內(nèi)邊距呈現(xiàn)了內(nèi)容部分的背景顏色
2.在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加整體元素框的大小。
所以如果我們想要在修改內(nèi)容在標(biāo)簽中的位置的同時(shí)又不改變整體元素框的大小時(shí)就要對(duì)我們的內(nèi)容部分進(jìn)行修改了。
下面介紹一下內(nèi)邊距的具體設(shè)置：
padding-top:20px / 10%;/*頂部?jī)?nèi)邊距*/
padding-right:20px / 10%;/*右邊內(nèi)邊距*/
padding-bottom:20px / 10%;/*下面內(nèi)邊距*/
padding-left:20px / 10%;/*左邊內(nèi)邊距*/
這是單一設(shè)置四個(gè)邊的內(nèi)邊距的方式，我們也可以綜合來寫。
假設(shè)我們希望所有的h1標(biāo)簽的各個(gè)邊都有10像素的內(nèi)邊距：
h1{padding:10px;}
像這樣子寫就是代表上下內(nèi)邊距為10px，左右內(nèi)邊距為20px。
h1{padding:10px ?20px;}
這樣子設(shè)置就是代表上內(nèi)邊距為10px，左右內(nèi)邊距為20px，下內(nèi)邊距為30px。
h1{padding:10px ?20px ?30px;}
當(dāng)我們?cè)O(shè)置4個(gè)值時(shí)，按順時(shí)針方向來數(shù)即：上內(nèi)邊距10px，右內(nèi)邊距20px，下內(nèi)邊距30px，左內(nèi)邊距40px。
h1{padding:10px 20px 30px 40px;}
有時(shí)候我們的內(nèi)容模塊很小，那么在設(shè)置內(nèi)邊距時(shí)優(yōu)先滿足上內(nèi)邊距與做內(nèi)邊距。
代碼演示如下：
效果圖：
讓我們打開瀏覽器的檢查功能看一下我們?cè)O(shè)置的padding的效果：
我們實(shí)際設(shè)置的padding效果如上圖的紫色部分，但是因?yàn)槲覀兊膒標(biāo)簽內(nèi)容大少無法滿足這么大的區(qū)域，只有優(yōu)先滿足上內(nèi)邊距與左內(nèi)邊距了。
而且我們?cè)O(shè)置div標(biāo)簽的大小時(shí)200px*200px，現(xiàn)在我們看見整個(gè)div的標(biāo)簽大小為260（200+20+40）*240（200+10+30）。
外邊距
盒子模型之
圍繞在元素邊框的空白區(qū)域是外邊距。
設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”。設(shè)置外邊距的最簡(jiǎn)單的方法就是使用 margin 屬性，這個(gè)屬性接受任何長(zhǎng)度單位、百分?jǐn)?shù)值甚至負(fù)值。
閑話少說上干貨：
h1 {margin : 0.25in;}
這句代碼的意思就是：在 h1 元素的各個(gè)邊上設(shè)置了 1/4 英寸寬的空白
當(dāng)我們提供數(shù)值不足四個(gè)時(shí)候，請(qǐng)看下面的圖片。（內(nèi)邊距也是同樣的道理）
我想這個(gè)圖應(yīng)該是很直觀了。
當(dāng)然我們也可以分開來為每個(gè)邊賦值：
h1 {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 5px;
}
和：
h1{margin：10px 0px 15px 5px；}的效果是一樣的。
光有知識(shí)是不夠的，還應(yīng)當(dāng)去運(yùn)用。
所以小伙伴們也自己嘗試著做些什么東西吧！
學(xué)習(xí)如果不是為了裝逼，那么將毫無意義！！！
當(dāng)然有什么問題或者需要李娜我給大家分享講解的地方，可以在留言區(qū)留言告訴我，整理后會(huì)在公眾號(hào)里面分享講解哦！
