Css样式表中：margin、paddi…

原文地址：Css样式表中：margin、padding和border作者：相淋

样式表的精髓：margin和padding和border

一、padding

我们可以把加过样式表的HTML标记看成是一个盒子。

对这个盒子中的内容控制，用到的样式：padding

它又分为：padding-left、padding-right、padding-bottom、padding-top

padding是什么意思可以看作是我这个盒子里面的东西和盒子周围的距离。

例如我今天下午遇到的一个问题：如何把一个按钮上的文字显示到按钮的正中央来，可以给这个按钮的padding样式进行设置：padding-top=5px;就可以看到效果了。

注意：如果这个标记太小，看不到效果，因为padding是对标记里面的内容起作用的一个标记。

例如用padding实现对一个按钮的操作：

代码：<input type="button" value="我是一个快乐的按钮"style="border:solid 1px black; padding-top:5px;background-color:#FF0000;coor=blue">

 

 

二、margin

我们还是把一个HTML标记看成是一个盒子。既然padding是这个盒子里面的内容（或是数字汉字一类、或是图片），那么margin就是用来设置这个盒子和周围的盒子的内容之间的距离

margin:是这个盒子和周围盒子（HTML标记）的距离：margin-left、margin-right、margin-top、margin-bottom

 这个例子：比如说我们看到的一些书上的文字，每一段文字可以使一个P标记，可以看成是一个盒子，对这个盒子和周围的盒子（段落P标记）进行操作，比如每段文字之间可以隔多少的间距，就可以用margin来实现。

三、border

我的博客上时常用到border样式表。

用border可以实现的效果：例如给一个普通的textbox的border加上点效果:

这是没有加上border样式表的效果：

 

加上样式表的效果style="border:solid 5px black";==>效果：

 

style="border:solid 5px red"

 

简单解释一下border后面这几个参数的意思：第一个是border的样式、第二个是border的粗细（用像素px来表示）、第三个是border的颜色。

border的三个属性

可以单独设：border-style    border-width    border-color

例如: <pstyle="border-style:dashed;border-width:1px;border-color:#FF0000"></p>

Css样式表的精华还需要我慢慢的研究下去，今天先介绍这么多。

---