简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型分析-2019年7月4日
Blogger Information
Blog 26
fans 1
comment 0
visits 18873
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型分析-2019年7月4日
坏人也温柔de陈词滥调
Original
440 people have browsed it

实例

<style>
    /*禁止全部默认外边距，内边距*/
    *{margin:0;padding:0;}
    .box{
        margin-top:20px;
        margin-right:15px;
        margin-bottom:10px;
        margin-left:5px;
        background-color: aquamarine;
        width:300px ;
        height: 300px;
        padding-top:5px;
        padding-right: 10px;
        padding-bottom:15px;
        padding-left:5px;
        border-top: 1px solid black;
        border-right: 3px dotted black;
        border-bottom: 5px double black;
        border-left: 7px dashed black;
        /*border:10px groove red;*/
        /*border-style:groove;*/

    }
    .box1{
        background-color: #888888;
        width: 200px;
        height: 200px;
        margin:20px;
        padding: 20px;
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: black;
    }
</style>
</head>
<body>
<div class="box">
    <div class="box1">
        <div class="box2"></div>
    </div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

浅析margin（外边距），border（边框），padding（内边距）

一个完整的div 从内到外顺序依次为：content ->  padding -> border -> margin

padding：从内容到内边框的距离；

margin：从外边框到其他同级或父级元素之间的距离

margin , padding , border 相同之处

设置顺序 依次为 上 -> 右 -> 下 -> 左


Correction status：qualified

Teacher's comments：看上去应该没有写完, 或者分到多个博客中了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！