CSS margin 属性
实例
设置 p 元素的 4 个外边距：
p
{
margin:2cm 4cm 3cm 4cm;
}定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
CSS padding 属性
实例
设置 p 元素的 4 个内边距：
p
{
padding:2cm 4cm 3cm 4cm;
}应用案例
<head>
<title>案例-产品模块</title>
<style>
/*清除浏览器默认边距*/
* {
margin: 0;
padding: 0;
}
/*设置背景颜色*/
body {
background-color: #f5f5f5;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
/*居中对齐*/
margin: 100px auto;
}
.box img {
/*设置图片宽度和box一样*/
width: 100%;
}
/*a 标签样式*/
a {
color: #333;
text-decoration: none;
}
.review {
height: 70px;
font-size: 14px;
padding:0 28px;
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding:0 28px;
}
.info {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400;
}
.info span {
color: orange;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="img.png" />
<p class="review"><a href="https//www.cyrilstudio.top">我是梁朝伟</br> 代表作品：花样年华、无间道、重庆森林、色·戒、悲情城市、春光乍泄.... </a></p>
<div class="appraise">来自126043912人的认证-帅</div>
<div class="info">
<h4><a href="https//www.cyrilstudio.top">梁朝伟喜欢刘德华...</a></h4>
<em>|</em>
<span>99.9元</span>
</div>
</div>
</body>声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
