大家好，我们来分享CSS内外边距和div居中
看源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 外边距 :使元素居中*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
/* 自动对齐*/
}
h2{
font-size: 15px;
background-color: greenyellow;
line-height: 30px;
}
form{
background: darkorchid;
}
input{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text" >
</div>
<div>
<span>密码:</span>
<input type="text" >
</div>
<div>
<span>姓名:</span>
<input type="text" >
</div>
</form>
</div>
</body>
</html>
效果：
居中的效果：
在这个右下角也可以测试它
源码：
h2{
font-size: 15px;
background-color: greenyellow;
line-height: 30px;
margin-top: 0;
}
显示结果：
整体源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 外边距 :使元素居中*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
/* 自动对齐*/
}
h2{
font-size: 15px;
background-color: greenyellow;
line-height: 30px;
/*margin:0 1px 2px 3px;*/
padding: 10px;
/*margin:0*/
/*margin:0 1px*/
/*margin:0 */
/*margin:0 1px 2px 3px;*/
}
form{
background: darkorchid;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text" >
</div>
<div>
<span>密码:</span>
<input type="text" >
</div>
<div>
<span>姓名:</span>
<input type="text" >
</div>
</form>
</div>
</body>
</html>
效果
盒子的计算方式：
内容+内边距（padding）+边框（border）+外边距（margin）
好了，有关于CSS内外边距和div居中就到这里了，谢谢大家