整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
東IT優就業
什么是margin、padding?margin和padding的區別和用法又是什么?廣州IT培訓老師告訴你。
marigin：就是外邊距。padding：就是內邊距。panda是熊貓大家都是知道吧，熊貓是我們中國的國寶而且都很可愛，所以看見padding就知道了是內邊距是吧。
一、margin和padding的用法
二、其他的方法
margin和padding都是簡寫屬性，他們可以直接在里面設置他們的屬性。即：margin/padding：值 。但是這個樣子寫的話都把所有的值都設置了還能讓其他的值都單個的寫嗎?方法是有的：
當你寫的margin/padding寫的沒毛病的時候，他沒有給顯示出來我想要的結果是什么情況?
這種情況出現的時候請你先檢查你的代碼是否有問題，若是代碼沒有問題的話就是出現了BUG。那么該如何解決的?
當你的margin出現問題的時候只要在父元素中加入overflew：hidden 就可以解決它的問題。但是當你的父元素出現溢出情況的時候就回隱藏。
當你的padding出現問題的時候只要在元素中加入box-sizing：border-box 就可以解決它的問題。
希望廣州IT培訓老師分享的內容對大家有所幫助。
廣東IT優就業
出處：www.cnblogs.com/CcPz/p/8185489.html
更多IT精彩推薦：
帶你打開世界第一編程語言的大門：http://www.ujiuye.com/zt/java/?wt.mc_id=17009338
例
設置一個p元素的右邊距：
p
{
margin-right:2cm;
}
屬性定義及使用說明
margin-right屬性設置元素的右邊距。
注意： 負值是允許的。
| 默認值： | 0 |
|---|---|
| 繼承： | no |
| 版本： | CSS1 |
| JavaScript 語法： | object.style.marginRight="10px" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| margin-right | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
屬性值
| 值 | 描述 |
|---|---|
| auto | 瀏覽器設置的右外邊距。 |
| length | 定義固定的右外邊距。默認值是 0。 |
| % | 定義基于父對象總高度的百分比右外邊距。 |
| inherit | 規定應該從父元素繼承右外邊距。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
著橙先生上一篇的常見樣式屬性，可以用在絕大多數的標簽中，如div、sapn、p等標簽中，這篇繼續講樣式屬性，不過是一些特殊標簽的樣式屬性。
廢話不多說，直接往下看
1、<img src="圖片路徑" alt="圖片的描述說明文字">
Img標簽也有橙先生上一篇文章中介紹的常見樣式屬性，另外如上所見它也有自己特殊的屬性src和alt屬性，img就是圖片標簽，那么src就是引入圖片的屬性，其中輸入圖片路徑地址即可，而alt屬性是對圖片的描述文字，當圖片不能正常顯示時，將會顯示alt里的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="GZ.png" alt="‘Hi橙先生’是我的公眾號名稱，請關注一下吧！謝謝" style="width: 400px; height: auto;">
</body>
</html>
如下圖所示
圖片未正常顯示的效果
<ul>
<li>這是ul標簽中的一個小LI</li>
</ul>
<ol>
<li>這是ol標簽中的一個小li</li>
</ol>
ul和ol的固定樣式效果
2、無序列表和有序列表，它們有固定的樣式如下圖的圓點和序號，大多數情況我們是不需要的，這時我們就可以通過list-style: none;這個樣式屬性取消它們的固定樣式
<ul style="list-style: none;">
<li>這是ul標簽中的一個小LI</li>
</ul>
<ol style="list-style: none;">
<li>這是ol標簽中的一個小li</li>
</ol>
ul和ol取消固定樣式的效果
3、另外在常見的標簽中的文章中提到的a標簽，其中href屬性就是填寫鏈接目標的地方，而target屬性定義被鏈接的文檔（即網址）在何處顯示，常用的就是“_blank”代表在新窗口中打開被鏈接文檔。默認的是“_self”代表在此窗口中打開被鏈接文檔，其他屬性值不常用，就不過多介紹了
<a href="需要跳轉到的網址或是文件，如" target="_blank">這個是文字的鏈接</a>
4、外邊距（margin）、內邊距（padding）,每個標簽元素都可以設定外邊距和內邊距，外邊距可以理解為是盒子以外的部分，而內邊距是盒子以內的部分直到內容的地方，看圖或是實際操作會比較好理解一些
所有HTML元素可以看作盒子，它包括：邊距（margin），邊框(border)，填充（padding），和實際內容(content)，如下圖
HTML元素可以看作盒子
當您指定一個 CSS 元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完整大小的元素，你還必須添加內邊距，邊框和邊距。
下面的例子中設置div元素的寬度為300px，而實際寬度為450px
<div style="width: 300px;border: 25px solid orange;padding: 25px;margin: 25px;">這是一個div盒子</div>
實際寬度為450px的div
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
margin和padding（內邊距和外邊距）
margin或是padding只設置一個數值時代表上下左右都是這個數值，以下以margin為例的簡寫形式，代表的不同含義（padding也是一樣的）
margin屬性可以有一到四個值。
margin:25px 50px 75px 100px;
含義如下：
上外邊距為25px (margin-top: 25px;)
右外邊距為50px (margin-right: 50px;)
下外邊距為75px(margin-bottom: 75px;)
左外邊距為100px(margin-left: 100px;)
margin:25px 50px 75px;
含義如下：
上外邊距為25px(margin-top: 25px;)
左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)
下外邊距為75px(margin-bottom: 75px;)
margin:25px 50px;
含義如下：
上和下外邊距都為25px(margin-top: 25px和margin-bottom: 25px;)
左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)
margin:25px;
含義如下：
上、下、左、右外邊距都是25px（margin-top: 25px和margin-bottom: 25px;margin-right: 25px;margin-left: 25px）
這部分先講到這里，后續將會不斷的提到這些屬性，記得要上手操作哦，動手寫一下才能更好的理解！加油！爭取后續出個視頻，這樣可以更形象的講解。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
