css内外边距样式

来源：互联网发布：床边故事专辑知乎编辑：程序博客网时间：2024/06/05 04:49

外边距样式

1.margin-top

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><link rel="stylesheet" type="text/css" href="1.css"/><div id="div1"><div id="div2"></div></div></body></html>

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;}#div2{width:30px;height:30px;border:solid 5px blue;margin-top:40px;}

2.margin-right

不能用来定义子块与父块的距离，只能定义子块与子块之间的距离。

不是浮动情况下，margin-right没有作用的

3.margin-bottom

不能用来定义子块与父块的距离，只能定义子块与子块之间的距离。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><link rel="stylesheet" type="text/css" href="1.css"/><div id="div1"><div id="div2"></div><div id="div3"></div></div></body></html>

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;}#div2{width:30px;height:30px;border:solid 5px blue;margin-bottom:100px;}#div3{width:40px;height:40px;border:solid 2px blue;}

4.margin-left

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;}#div2{width:30px;height:30px;border:solid 5px blue;margin-left:40px;}

5.margin

四个参数：上、右、下、左

三个参数：上、左右、下

两个参数上下、左右

以两个参数的为例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><link rel="stylesheet" type="text/css" href="1.css"/><div id="div1"><div id="div2"></div></div></body></html>

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;}#div2{width:30px;height:30px;border:solid 5px blue;margin:200px 50px;}

内边距样式

1.padding-top

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><link rel="stylesheet" type="text/css" href="1.css"/><div id="div1">11111111111111111111111111111</div></body></html>

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;padding-top:100px;}

2.padding-right

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;padding-right:200px;}

这个相比top的宽度是不是变宽了仔细对比一下

3.padding-bottom

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;padding-bottom:10px;}

不截图了自己改变padding-bottom的像素对比一下

4.padding-left

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;padding-bottom:10px;}

5.padding

四个参数上右下左

三个参数上左右下

两个参数上下左右

我们也是用两个参数来举例

@charset "utf-8";/* CSS Document */#div1{width:300px;height:300px;border:solid 5px red;padding:50px 30px;}

0 0