margin和padding的用法

如果我们想要移动盒子等的位置，除了可以用相对定位和绝对定位还可以用margin 和paddinng；

margin和padding的用法：
padding和margin后面可以跟1或2或3或4个数，按照顺序分别是上，右，下，左。具体的操作如下：
（1）padding(margin)-left:10px;左内（外）边距；
（2）padding(margin)-right:10px;右内（外）边距；
（3）padding(margin)-top:10px;上内（外）边距；
（4）padding(margin)-bottom:10px;下内（外）边距；
（5）padding(margin):10px;四边统一内（外）边距；
（6）padding(margin):10px 20px; 10px是上下内（外）边距；20px是左右内（外）边距
（7）padding(margin):10px 20px 30px; 10px是上内（外）边距；20px是左右内（外）边距；30px是下内（外）边距；
（8）padding(margin):10px 20px 30px 40px; 10px是上内（外）边距；20px是右内（外）边距；30px是下内（外）边距；40px是左内边距；

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.par{width: 300px;height: 300px;background: salmon;}</style>
</head>
<body>
<div class="par">我是文本
</div>
</body>
</html>

先定为一个块，对块和文本不进行任何操作的时候，块在浏览器默认上左有8个像素，块和文本的位置如图：
在这里我们可以利用margin改变块的位置；现在我们举例用margin让块紧靠浏览器上左边框。
代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.par{margin:-8px;width: 300px;height: 300px;background: salmon;}.par>span{display: block;width: 100px;height: 100px;padding: 100px;/* margin: 100px;*/color: aqua;}</style>
</head>
<body>
<div class="par"><span>我是文本</span>
</div>
</body>
</html>

上面代码中我给的margin是-8px，因为在浏览器中默认上左有8个像素，所以这里的margin: -8px;可以让红色的盒子靠着浏览器的上边和左边。
span是个行级元素，先把他转化成块级元素，然后给padding就可以设置“文字”与红色盒子的内边框距离。

margin的用法说明：
（1）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+30px的margin，将得到30px的空白距离。（两个盒子都有margin时，选择较大距离的）

（2）需要在border外侧添加空白时。
（3）空白处不需要有背景色时。

padding的用法说明：
（1）padding不能给负值，margin可以给负值。
（2）需要在border内测添加空白时（文字与边框距离的设置）
（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px
+20px的padding，将得到35px的空白。

另外，记录一下我今天遇到的一个小问题，如下图一级菜单里面的公司招聘里的二级菜单当鼠标悬浮在python上，我们明显可以看到python没有在竖直方向居中，这个是因为在给定宽高之后，为了让二级菜单整体往下走一点，给了一个padding：10px 0 0 0；这个10px就加在高上，所以text-align: center只能让文本在水平方向居中，而不能在竖直方向居中。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.out_block{height: 35px;width: 1500px;padding: 10px;background-color: #97eede;float: left;}.menu{list-style: none;float: left;display: block;width:275px;max-height: 30px;text-align: center;line-height: 30px;border: 1px solid silver;background: #ffa874 !important;}.menu:hover{cursor: pointer;color: red;background: white!important;}.menu_li:hover .menu_two{display: block;}.menu_two{list-style: none;display: none;color: black;background:#ffa874;}.menu_two>li{display: block;padding: 10px 0 0 0;height: 30px;line-height: 30px;text-align: center;font-size: 14px;}.menu_two>li:hover{background: white;color: red;}</style>
</head>
<body>
<ul class="out_block"><li class="menu">首页</li><li class="menu menu_li">公司招聘<ul class="menu_two"><li>web前段</li><li>python</li><li>java</li><li>linux</li><li>运维</li><li>ui</li></ul></li><li class="menu">相册</li><li class="menu">了解更多</li><li class="menu">帮助</li>
</ul>
</body>
</html>

解决这个问题的方法如下：加一段line-height:20px；（如果是正常情况的话（这里的正常情况指的是给定宽高，没有影响宽高的因素如：padding）让文本在竖直方向居中line-height：30px（宽度））


<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.out_block{height: 35px;width: 1500px;padding: 10px;background-color: #97eede;float: left;}.menu{list-style: none;float: left;display: block;width:275px;max-height: 30px;text-align: center;line-height: 30px;border: 1px solid silver;background: #ffa874 !important;}.menu:hover{cursor: pointer;color: red;background: white!important;}.menu_li:hover .menu_two{display: block;}.menu_two{list-style: none;display: none;color: black;background:#ffa874;}.menu_two>li{display: block;padding: 10px 0 0 0;height: 30px;line-height: 20px;text-align: center;font-size: 14px;}.menu_two>li:hover{background: white;color: red;}</style>
</head>
<body>
<ul class="out_block"><li class="menu">首页</li><li class="menu menu_li">公司招聘<ul class="menu_two"><li>web前段</li><li>python</li><li>java</li><li>linux</li><li>运维</li><li>ui</li></ul></li><li class="menu">相册</li><li class="menu">了解更多</li><li class="menu">帮助</li>
</ul>
</body>
</html>

margin和padding的用法相关推荐

margin和padding的区别和用法
margin和padding的区别和用法什么是margin.padding? marigin:就是外边距.padding:就是内边距.怎么就容易记住两者呢? 马蓉大家都知道吧,给王宝强带帽子的那位, ...
margin、padding、border
(一)含义与原理 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. border指边框 (1)平面 ...
margin 和 padding 的使用区别
1.平面图 2.立体图 3.margin 外边距元素周围生成额外的空白区."空白区"通常是指其他元素不能出现且父元素背景可见的区域. 关于外边界距离的设定,规则如下: /*四周相 ...
CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
css样式向下补白,CSS尺寸与补白属性-----margin和padding
margin margin:[ | | auto ]{1,4} 为元素设置所有四个方向(上右下左)的外边距 auto:水平(默认)书写模式下,vertical-margin计算值为0,horizon ...
margin和padding的使用
一.margin外边距元素周围生成额外的空白区,"空白区"通常是指其他元素不能出现且父元素背景可见的区域. 二.padding内边距称呼为内边距,其判断的依据即边框离内容正文的 ...
何时使用margin和padding？
margin和padding的意义相信大家都很清楚,可是在具体应用中,到底应该使用哪一个,就比较难于判断了. 这篇文章说得挺清楚的,在这里翻译一下,供参考. 何时应当使用margin 需要在bord ...
margin和padding
在制作网页中,margin和padding的使用是必不可少的,在这里,我截了一张图. 在这张图中, 内部的蓝色区域是内容的区域, 再往外的绿色框是内填充,就是我们所说的padding, 往外有点浅黄色 ...
android 动态设置padding,Android动态设置控件大小以及设定margin以及padding值
http://www.aichengxu.com/Java/73893.htm Android动态设置控件大小以及设定margin以及padding值,有需要的朋友可以参考下. 一.概述在andro ...

margin和padding的用法

margin和padding的用法相关推荐

最新文章

热门文章