CSS. 了解边框，边距和填充属性

本教程将帮助您更好地理解边框，填充和边距CSS属性. 这些属性帮助web开发人员以所需的方式安排网页上的元素.

让我们创建一些div并分配margin, padding和border属性.

Padding property

CSS填充属性定义元素边框和元素内容之间的空间. 你可以用下面的方法定义填充值:

• padding-top: 10px;
• padding-right: 10 px;
• padding-bottom: 10 px;
• padding-left: 10px;

你也可以使用shortand属性:

• Padding:25px 50px 75px 100px;
  • top padding is 25px
  • 右边距为50px
  • 底部填充为75px
  • 左边距为100px
  
  
• Padding:25px 50px 75px;
  • top padding is 25px
  • 左右间距为50px
  • 底部填充为75px
  
  
• padding:25px 50px;
  • 顶部和底部填充为25px
  • 左右间距为50px
  
  
• padding:25px;
  • 所有四个边距都是25px

注意:填充值被添加到元素宽度中，并受元素的影响 background.

换句话说，我们有div类div-1的元素div:

div.div-1{
width:150px;
padding: 25px;}

The browser 添加左和右填充值到框的宽度. 这样你就会看到一个宽度为200px的框.

Border property

CSS边框属性允许您指定元素边框的样式和颜色.

border-width

border-width属性用于设置边框的宽度. 宽度以像素为单位设置，或者使用三个预定义值之一:thin、medium或thick.

border-color

border-color属性用于设置边框的颜色. 颜色可以通过以下方式设置:

• 名称-指定颜色名称，如“红色”
• RGB -指定一个RGB值，如" RGB (255,0,0) "
• 十六进制-指定一个十六进制值，如“#ff0000”

border-style

• dotted:定义虚线边框
• dashed:定义虚线边框
• solid:定义实线边框
• double:定义两个边界. 这两个边框的宽度与border-width值相同
• groove:定义3D凹槽边框. 效果取决于边框颜色值
• ridge:定义一个3D脊状边框. 效果取决于边框颜色值
• inset:定义3D内嵌边框. 效果取决于边框颜色值
• outset:定义3D起始边框. 效果取决于边框颜色值

使用shortand属性，你可以这样定义元素的边框:

div.div-2{
	边框:1px实线#ccc;
    }

Margin property

CSS边距属性定义元素周围的空间. 边距清除元素周围的区域(在边框之外)。. 保证金没有 background 颜色，是完全透明的.

你可以用下面的方法定义元素的边距值:

• margin-top:100px;
• margin-bottom: 100 px;
• margin-right:50px;
• margin-left:50px;

你也可以使用shortand属性:

• 边距:25px 50px 75px 100px;
  • top margin is 25px
  • 右边距为50px
  • 底边距75px
  • 左距为100px
  
  
• 边距:25px 50px 75px;
  • top margin is 25px
  • 左右边距分别为50px
  • 底边距75px
  
  
• margin:25px 50px;
  • 上下边距为25px
  • 左右边距分别为50px
  
  
• margin:25px;
  • 所有四个边距都是25px

使用margin属性的auto值，您可以将块水平居中.

div.div-3{
	margin: 0 auto;
    }

如果你想了解更多关于模板与CSS功能，浏览我们的 Bootstrap管理主题.