margin和padding的用法

最新推荐文章于 2024-08-01 10:36:14 发布

小新大人y

最新推荐文章于 2024-08-01 10:36:14 发布

阅读量3.8w

点赞数 45

分类专栏： html 文章标签： margin和padding html padding的坑 margin padding

本文链接：https://blog.csdn.net/qq_44885374/article/details/89371818

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果我们想要移动盒子等的位置，除了可以用相对定位和绝对定位还可以用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>

在这里插入图片描述