CSS的margin和padding属性怎么使用

这篇文章主要介绍了CSS的margin和padding属性怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS的margin和padding属性怎么使用文章都会有所收获，下面我们一起来看看吧。

margin和padding属性

margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。margin是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。”10px10px10px10px”分别代表”上右下左”(顺时针方向)四个边距，如果都一样，可以缩写成”margin:10px;”。如果边距为零，要写成”margin:0px;”。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位”px”。margin是透明元素，不能定义颜色。padding是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成”padding:0px”。单独指定左边可以写成”padding-LEFT:0px;”。padding是透明元素，不能定义颜色。

例子h3：

h3{  font-size:1.5em;  background-color:#ccc;  margin:1em;  padding:3em;  }

为什么不翻译margin和padding？

原因一，在汉语中并没有与之相对应的词语；原因二：即使有这样的词语，由于在编写CSS代码时，必须使用margin和padding，如果我们总用汉语词语代替其来解释的话，到了实际应用时容易混淆margin和padding的概念。

如果有一点Html基础的话，就应该了解一些基本元素(Element)，如p,h2~h7，br，div，li，ul，img等.如果将这些元素细分，又可以分别归为***(top-level)元素，块级(block-level)元素和内联(inline)元素。

1.Block-levelelement：指能够独立存在，一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。常用的块级元素包括:p,h2~h7,div,ul等；

2.Inlineelement：指依附其他块级元素存在，紧接于被联元素之间显示。而不换行。常用的内联元素包括：img,span,li,br等；

3.Top-levelelement：包括html，body，frameset，表现如Block-levelelement，属于高级块级元素。

块级元素是构成一个html的主要和关键元素，而任意一个块级元素均可以用Boxmodel来解释说明。

BoxModel：任意一个块级元素均由content(内容)，padding，background(包括背景颜色和图片)，border(边框)，margin五个部分组成。

◆以下说明margin和padding属性：

margin：

包括margin-top，margin-right，margin-bottom，margin-left，控制块级元素之间的距离，它们是透明不可见的，对于上右下左margin值均为40px，因此代码为：

h3{  margin-top:40px;  margin-right:40px;  margin-bottom:40px;  margin-left:40px;  }

根据上,右,下,左的顺时针规则,简写为

h3{  margin:40px40px40px40px;  }

当上下、左右margin值分别一致,可简写为：

h3{  margin:40px40px;  }

前一个40px代表上下margin值，后一个40px代表左右margin值。

当上下左右margin值均一致，可简写为：

h3{  margin:40px;  }

padding：

包括padding-top、padding-right、padding-bottom、padding-left，控制块级元素内部content与border之间的距离，其代码简写请参考margin属性的写法。

至此，我们已经基本了解margin和padding属性的基本用法。但是，在实际应用中，却总是发生一些让你琢磨不透的事，而它们又或多或少的与margin有关。

注:当你想让两个元素的content在垂直方向(vertically)分隔时，既可以选择padding-top/bottom，也可以选择margin-top/bottom，在此建议你尽量使用padding-top/bottom来达到你的目的，这是因为CSS中存在Collapsingmargins(折叠的margins)的现象。

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

关于“CSS的margin和padding属性怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS的margin和padding属性怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。