CSS尺寸与补白属性-----margin和padding

时间：2022-11-14 23:27:45

   margin

margin：[ <length> | <percentage> | auto ]{1,4}  为元素设置所有四个方向（上右下左）的外边距

  • auto：水平（默认）书写模式下，vertical-margin计算值为0，horizontal-margin取决于包含块的剩余可用空间
  • <length>：用长度值来定义外补白。可以为负值
  • <percentage>：用百分比来定义外补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，可以为负值 

   margin属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，

第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

    <head>
        <meta charset="utf-8" />
        <title>margin_CSS参考手册_web前端开发参考手册系列</title>
        <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
        <style>
            .test {
                margin: 10px 20px 40px 80px;
                background: #eee;
            }
        </style>
    </head>

    <body>
        <div class="test">注意我距上、右、下、左的距离</div>
    </body>

</html>

   padding

padding：[ <length> | <percentage> ]{1,4}  为元素设置所有四个方向（上右下左）的内边距

  • <length>：用长度值来定义内补白。不允许负值
  • <percentage>：用百分比来定义内补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，不允许负值

  padding属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，

第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .test {
                float: left;
                padding: 10px;
                border: 1px solid #000;
            }
        </style>
    </head>

    <body>
        <div class="test">注意我离4条边框线的距离</div>
    </body>

</html>

 

标签：

相关文章