外边距 margin
margin 可以单独改变元素的上、下、左、右外边距，也可以一次改变所有的外边距。
语法
/* margin 单边外边距属性 */
/* 上边距为25px 下边距为50px 左边距为100px 右边距为40px */
margin-top: 25px;
margin-bottom: 50px;
margin-left: 100px;
margin-right: 40px;
/* margin 指定所有边距属性，可以有一到四个值，顺时针旋转赋值 */
/* 上边距为25px 右边距为50px 下边距为75px 左边距为100px */
margin: 25px 50px 75px 100px;
/* 上边距为25px 左右边距为50px 下边距为75px */
margin: 25px 50px 75px;
/* 上下边距为25px 左右边距为50px */
margin: 25px 50px;
/* 4个边距都是25px */
margin: 25px;通过 margin 实现水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 外边距妙用：居中元素
margin: 0 auto;
*/
#box {
width: 300px;
/* border: 粗细 样式 颜色; */
border: 1px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text" value="solid">
</div>
<div>
<span>密码：</span>
<input type="text" value="dashed">
</div>
<div>
<span>邮箱：</span>
<input type="text" value="dotted">
</div>
<div>
<span>验证码：</span>
<input type="text" value="double">
</div>
</form>
</div>
</body>
</html>
内边距 padding
padding 定义元素边框与元素内容之间的空间，即上下左右的内边距。
语法
/* padding 单边内边距属性 */
/* 上内边距为25px 下内边距为50px 左内边距为100px 右内边距为40px */
padding-top: 25px;
padding-bottom: 50px;
padding-left: 100px;
padding-right: 40px;
/* padding 指定所有内边距属性，可以有一到四个值，顺时针旋转赋值 */
/* 上内边距为25px 右内边距为50px 下内边距为75px 左内边距为100px */
padding: 25px 50px 75px 100px;
/* 上内边距为25px 左右内边距为50px 下内边距为75px */
padding: 25px 50px 75px;
/* 上下内边距为25px 左右内边距为50px */
padding: 25px 50px;
/* 4个内边距都是25px */
padding: 25px;
1342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
