CSS之盒子模型

盒子模型

content（内容区域）

• 只对内容区域有改变

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

padding（内边距）

• padding 用于 扩展内容区域的间距，不会影响 margin 但会增加盒子大小

.box {
    padding: 20px;
}

padding: 10px;          /* 上右下左都 10px */
padding: 10px 20px;     /* 上下 10px，左右 20px */
padding: 10px 15px 20px;/* 上 10px，左右 15px，下 20px */
padding: 10px 15px 20px 25px; /* 上 10px，右 15px，下 20px，左 25px */

border（边框）

• border 是围绕 padding 和 content 的边框，可设定颜色、样式和宽度。

.box {
    border: 5px solid red;
}

border: 2px solid black;  /* 实线 */
border: 2px dashed blue;  /* 虚线 */
border: 2px dotted green; /* 点状 */
border: 2px double red;   /* 双线 */
border: none;             /* 无边框 */

margin（外边距）

• margin 用于 控制盒子与其他元素之间的间距。

.box {
    margin: 20px;
}

margin: 10px;          /* 上右下左都 10px */
margin: 10px 20px;     /* 上下 10px，左右 20px */
margin: 10px 15px 20px;/* 上 10px，左右 15px，下 20px */
margin: 10px 15px 20px 25px; /* 上 10px，右 15px，下 20px，左 25px */