css内外边距样式

最新推荐文章于 2023-12-19 15:56:44 发布

小李讲源码

最新推荐文章于 2023-12-19 15:56:44 发布

阅读量840

点赞数

CC 4.0 BY-SA版权

分类专栏： html&css 文章标签： css

本文链接：https://blog.youkuaiyun.com/ncut_LJD/article/details/50849188

html&css 专栏收录该内容

12 篇文章

订阅专栏

外边距样式

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;
}