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>