码迷,mamicode.com
首页 > 其他好文 > 详细

盒模型

时间:2018-12-30 12:47:07      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:外边距   左右   add   距离   外部   span   idt   pre   epp   

和模型的概述

    边:边界

    内边距:解决内部矛盾  padding

    外边距:解决外部矛盾  margin

css的padding

    padding属于盒子内部的,padding改变盒子得跟着增加

写法

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            margin-bottom: 5px;    /*盒子与盒子之间的距离*/
            /*写法第一种*/
            padding-top: 50px;    /*内边距上*/
            padding-right: 50px;  /*内边距右*/
            padding-right: 50px;  /*内边距下*/
            padding-bottom: 50px; /*内边距左*/
            /*写法第二种*/
            padding :50px;
            /*写法第三种*/
            padding:100px 200px 300px 400px;
            /*写法四 上下对应,左右对应*/
            padding:0 100px
        }
    </style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</body>

 

盒模型

标签:外边距   左右   add   距离   外部   span   idt   pre   epp   

原文地址:https://www.cnblogs.com/baoshuang0205/p/10198951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!