外边距和内边距

来源:互联网 发布:数控车床编程100例 编辑:程序博客网 时间:2024/06/05 14:18

外边距和内边距

盒子模型

外边距

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>外边距</title>

</head>

<style>

    * {

        margin: 0px;

        padding: 0px;

    }

    

    .test {

        width: 100px;

        height: 100px;

        background: red;

        /*inherit 继承*/

        /*margin-left: 100px;

        margin-top: 20px;*/

        /* margin: 100px 0px;*/

        /*margin:100px;

        margin: 100px 10px 100px 200px;*/

        margin: 0 auto;

     /* 使得当前对象居中,网页中经常使用margin:0 auto;*/

    }

 

</style>

 

<body>

    <div class="test"></div>

</body>

 

</html>

 

--------------------------------------------------------------------

 

内边距

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>内边距</title>

</head>

<style>

    * {

        margin: 0;

        padding: 0;

    }

    

    .test {

        /*想让test保持原有大小:400px*400px,手动减少宽高*/

        width: 300px;

        height: 200px;

        border: 1px solid red;

        padding-left: 100px;

        /*组织增生使得子元素向右移;*/

        padding-top: 200px;

     /*盒子模型:整个div占据网页大小:整个默认自己的宽高+内边距+边框粗细+外边距*/

    }

    

    .son {

        width: 50px;

        height: 50px;

        background: blue;

    }

 

</style>

 

<body>

    <div class="test">

        <div class="son"></div>

    </div>

</body>

 

</html>

 

原创粉丝点击