您的位置：首页 > 其它

Margin-Border-Padding

2014-07-28 00:18 148 查看

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
</head>
<style type="text/css">
.margin-border-padding{
word-break:break-all;
height:150px;
background-color: yellow;
margin: 0px 20px 30px 40px;
border: 3px solid red;
border-top-style:dashed;
padding: 30px 20px 6px 10px;/*上右下左*/
}
</style>
<body>
<!--
margin:表示当前div与外界
border:表示当前div的边框
padding:表示当前div与内部

-->
<div style="height:200px;width:200px;background-color:gray">
<div class="margin-border-padding">
<div>alskjaksjg;akjsg;lakalskjg;agasgasgj;askjg;aksjg;akjsg;lak</div>
</div>
<div>
</body>
</html>

如果要让div水平居中可以设置：

margin:auto

或者margin:0px auto

或者margin:0px auto 0px;

如果一个div的长宽是300px,padding=10px，border=20px，margin=30px。则整个长宽是300+10+20+30=360px。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航