html5边框边距,html样式（边框）

1.所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离

image.png

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。

当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。

.injected-text {

margin-bottom: -25px;

text-align: center;

}

.box {

border-style: solid;

border-color: black;

border-width: 5px;

text-align: center;

}

.yellow-box {

background-color: yellow;

padding: 10px;

}

.red-box {

background-color: red;

padding: 20px;

}

.green-box {

background-color: green;

padding: 10px;

}

margin

padding

padding

2.元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离

3.如果你将一个元素的 margin 设置为负值，元素将会变大。

4.有时你想要自定义元素，使它的每一个边具有不同的 padding。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding

.green-box {

background-color: green;

padding-top: 40px;

padding-right: 20px;

padding-bottom: 20px;

padding-left: 40px;

}

padding

padding

5.有时你想要自定义元素，使它的每一个边具有不同的 margin。

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。

.green-box {

background-color: green;

margin-top: 40px;

margin-left: 40px;

margin-right: 20px;

margin-bottom: 20px;

}

padding

padding

6.除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

.red-box {

background-color: red;

padding: 20px 40px 20px 40px;

}

7.除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：

margin: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

.red-box {

background-color: red;

margin: 20px 40px 20px 40px;

}