内边距：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
span{
border:1px solid red;
/* padding:30px 设置span标签中内容与边框之间的距离 */
/* padding:30px */
/* 设置上下内边距为20px 左右内边距为10px */
/* padding:20px 10px; */
/* 上内边距20px 左右内边距10px 下内边距50px */
/* padding:20px 10px 50px; */
/* 上内边距20px 右内边距10px 下内边距50px 左内边距80px */
/* padding:20px 10px 50px 80px; */
padding-top:20px;
padding-right:30px;
padding-bottom:50px;
padding-left:40px;
}
</style>
</head>
<body>
<span>我是span标签</span>
</body>
</html>
外边距：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.father{
border:3px solid red;
}
.son{
width:200px;
height:200px;
border:1px dashed blue;
/* margin-top:20px; */
/* 父元素没有设置宽度，占整个一行，所以设置右外边距看不出效果 */
/* margin-right:10px */
/* margin-bottom:20px; */
/* margin-left:50px; */
/* margin:50px; */
/* margin:20px 50px; */
/* margin:20px 50px 100px; */
margin:20px 50px 100px 80px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>外边距实现居中对齐：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
/* 设置元素水平居中 */
margin: 0px auto;
/* text-align: center;元素内容水平居中 */
text-align: center;
/* 元素内容垂直居中，将行高属性与元素高度设置为一样就可以实现 */
line-height: 200px;
}
</style>
</head>
<body>
<div>
我是div元素
</div>
</body>
</html>display属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 100px;
border: 1px solid red;
margin-bottom: 20px;
}
.first{
/* 通过display属性设置元素隐藏 */
display: none;
}
p{
border: 1px dashed blue;
width:200px;
height:50px;
/* 设置元素为行内元素 */
display: inline;
}
span{
border: 1px dotted green;
width: 200px;
height: 80px;
/* 设置元素为块级元素 */
display: block;
}
h2{
border: 1px solid #ff0;
width: 200px;
height: 90px;
/* 设置元素为行内块元素，元素既有高度又有宽度，还在同一行排列 */
display: inline-block;
}
</style>
</head>
<body>
<div class="first">1</div>
<div class="second">2</div>
<p>我是段落标签1</p>
<p>我是段落标签2</p>
<span>我是span标签1</span>
<span>我是span标签2</span>
<h2>我是二级标题标签1</h2>
<h2>我是二级标题标签2</h2>
</body>
</html>
版权声明：本文为m0_58295980原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。