html5布局中padding的使用理解

来源：互联网发布：udp端口号是多少编辑：程序博客网时间：2024/05/21 03:59

在网页制作中，margin和padding经常被使用到，margin前面已经讨论过，先总结一下padding的使用方式

1.padding的语法

与margin相同，差别有两点，margin可以为负值，padding没有，margin不占宽度，padding占宽度

举例说明

代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>padding的用法</title><style type="text/css">*{margin: 0px;padding: 0px;background: aqua;}.div1,.div2{width: 200px;height: 200px;background: wheat;border: 1px solid blue;}.test1{width: 100px;height: 100px;margin: 10px;background: green;}.test2{width: 100px;height: 100px;margin: 10px;background: green;padding: 10px;}</style></head><body><div class="div1"><div class="test1">锦瑟无端五十弦，一弦一柱思华年，庄周晓梦迷蝴蝶</div></div><hr /><div class="div2"><div class="test2">锦瑟无端五十弦，一弦一柱思华年，庄周晓梦迷蝴蝶</div></div></html>

对于test1没有使用padding，对于test2使用了padding，效果如下：

使用pading了的test2的面积变大，每个方向分别增加10px，可见padding占一定的元素的面积。

注意：pading使用在当前元素上，则表示当前元素里面的内容与当前元素边的距离，即内边距；这一点与margin也不同，margin使用在当前元素上是相对外部元素的距离的。以上例子如果在div上使用padding，则整个test块会增加padding的值。

1.margin与padding的混合使用

上面讨论过margin使用在当前元素上是作用与外元素距离，而padding是作用内元素内部

2.1举例说明：在当前元素同时使用margin和padding代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>padding的用法</title><style type="text/css">*{margin: 0px;padding: 0px;background: aqua;}.div1{width: 200px;height: 200px;background: wheat;border: 1px solid blue;}.test1{width: 100px;height: 100px;margin: 10px;padding: 10px;background: green;}</style></head><body><div class="div1"><div class="test1">锦瑟无端五十弦，一弦一柱思华年，庄周晓梦迷蝴蝶</div></div></html>

效果：

可见margin作用在外，padding作用在外，并没有必然的联系，

2.2在当前元素使用margin，父元素使用padding，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>padding的用法</title><style type="text/css">*{margin: 0px;padding: 0px;background: aqua;}.div1{width: 200px;height: 200px;background: wheat;padding: 10px;border: 1px solid blue;}.test1{width: 100px;height: 100px;margin: 10px;background: green;}</style></head><body><div class="div1"><div class="test1">锦瑟无端五十弦，一弦一柱思华年，庄周晓梦迷蝴蝶</div></div></html>

父元素div使用padding，子元素test1使用margin，效果如下：

此时，margin和padding的效果产生了叠加。

2.3兄弟元素分别使用margin和padding产生的效果，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>padding的用法</title><style type="text/css">*{margin: 0px;padding: 0px;background: aqua;}.div1{width: 200px;height: 300px;background: wheat;border: 1px solid blue;}.test1{width: 100px;height: 100px;margin: 10px;background: green;}.test2{width: 100px;height: 100px;padding: 10px;background: green;}</style></head><body><div class="div1"><div class="test1">锦瑟无端五十弦，一弦一柱思华年，庄周晓梦迷蝴蝶</div><div class="test2">锦瑟无端五十弦，一弦一柱思华年，庄周晓梦迷蝴蝶</div></div></html>

效果如下：

test2与test1的距离并没有因为使用padding而产生变化，倒是test2使用padding后自身面积相应变大了。

0 0