整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
东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小时内与您取得联系。
