CSS - 盒子模型（Margin Border Padding）

这个图很生动的表达了： Margin Border Padding 之间的关系

 

margin：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

padding：其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。——CSS权威指南

 

 

Padding（内边距）属性定义及使用说明

Padding是比较常用CSS样式，可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。

例子 1

padding:10px 5px 15px 20px;

• 上内边距是 10px
• 右内边距是 5px
• 下内边距是 15px
• 左内边距是 20px

例子 2

padding:10px 5px 15px;

• 上内边距是 10px
• 右内边距和左内边距是 5px
• 下内边距是 15px

例子 3

padding:10px 5px;

• 上内边距和下内边距是 10px
• 右内边距和左内边距是 5px

例子 4

padding:10px;

• 所有 4 个内边距都是 10px

示例1：通过padding实现一个可以调整长度的竖线

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

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

    <style type="text/css">
        #span1{
            padding:12px 6px 1px;
            margin-left:12px;
            border-left:2px solid;
            font-size:0;
        }
    </style>

    <div>注册<span id="span1"></span>退出登录</div>

示例2：制作菜单，结合border-left transparent、hover鼠标指针悬停实现 动态效果

    <style type="text/css">
        #div1, #div2{
            background-color: #dddddd;
            border-left: 10px solid transparent;
            padding: 10px;
        }
        #div1:hover,#div2:hover{
            border-left: 100px solid rebeccapurple;
        }
    </style>


    <div id="div1">
        搜索数据
    </div>
    <br/>
    <div id="div2">
        计算数据
    </div>

 示例3：

通过margin-left实现一个可以调整长度的横线

.border001{
            border-top: 1px solid white;
            margin-left: 50px;
            width: 100px;
        }

 

Margin（外边距）属性定义及使用说明

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

• margin:10px 5px 15px 20px;
  • 上边距是 10px
  • 右边距是 5px
  • 下边距是 15px
  • 左边距是 20px
• margin:10px 5px 15px;
  • 上边距是 10px
  • 右边距和左边距是 5px
  • 下边距是 15px
• margin:10px 5px;
  • 上边距和下边距是 10px
  • 右边距和左边距是 5px
• margin:10px;
  • 所有四个边距都是 10px

 

CSS border 定义和用法

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

• border-width
• border-style
• border-color

 

示例 横线：

.border001{
    border-top: 1px solid cornflowerblue;
    margin-left: 30px;
    width: 140px;
}