关于CSS的问题。为什么margin-top没效果
<!doctype html>
<html>
<head>
<title>{{title}}</title>
<link href="static/main.css" rel="stylesheet"/>
</head>
<body class="bg-main">
<div class="container position-center margin-top-large bg-white radius" style="position:relative">
<div style="width:90%;" class="position-center">
<!-- 就这里 -->
<div id="!!!这里!!!" class="margin-top-big text-left font-bold" style="height:30px;line-height:30px;border-top:1px;border-bottom:1px;border-style:solid;border-color:#eee;">
<a href="" class="color-green font-bold">asdf</a>
</div>
<div class="margin-top-big">
asdfasdf
</div>
</div>
</div>
</body>
</html>.margin-top-big {
margin-top:20px;
}如果没有前面的 ，死活没效果，不会跟外层的div有边距。但是在这个div前面加上个 就有……为啥
附所有的CSS:
* {
margin: 0;
padding:0;
font-size:14px;
border:0px;
box-sizing:border-box;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
vertical-align: baseline;
outline:none;
}
body,html {
height:100%;
width:100%;
}
body {
color:#333;
}
a {
text-decoration: none;
}
.header {
width:100%;
}
.container {
min-width:800px;
max-width:1000px;
}
.position-center {
margin:0 auto;
}
.text-center {
text-align:center;
}
.text-left {
text-align:left;
}
.text-right {
text-align:right;
}
.padding-top-small {
padding-top:10px;
}
.padding-top-big {
padding-top:20px;
}
.padding-top-large {
padding-top:30px;
}
.padding-bottom-small {
padding-bottom:10px;
}
.padding-bottom-big {
padding-bottom:20px;
}
.padding-bottom-large {
padding-bottom:30px;
}
.padding-left-small {
padding-left:10px;
}
.padding-left-big {
padding-left:20px;
}
.padding-left-large {
padding-left:30px;
}
.margin-top-small {
margin-top:10px;
}
.margin-top-big {
margin-top:20px;
}
.margin-top-large {
margin-top:30px;
}
.content-radius-top {
border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
border-top-right-radius:4px;
-moz-border-top-right-radius:4px;
-webkit-border-top-right-radius:4px;
}
/** form **/
.form-group:after {
display:table;
content:" ";
clear:both;
}
.form-group {
margin-right:-15px;
margin-left:-15px;
margin-bottom:15px;
}
.form-group .control-label {
text-align:right;
padding-top:7px;
margin-top:0px;
margin-bottom:0px;
}
.form-control {
display: block;
width:100%;
padding:6px 12px;
color:#555;
vertical-align: middle;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
-moz-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.075) inset;
-webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.075) inset;
transition:border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
background:none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);
border:1px solid #000;
}
.form-control:focus {
box-shadow: 0px 0px 10px 4px #49af00 ;
color:#49af00;
}
.w-1 {
width:10%;
float:left;
}
.w-2 {
width:20%;
float:left;
}
.w-3 {
width:30%;
float:left;
}
.w-4 {
width:40%;
float:left;
}
.w-5 {
width:50%;
float:left;
}
.w-6 {
width:60%;
float:left;
}
.w-7 {
width:70%;
float:left;
}
.w-8 {
width:80%;
float:left;
}
.w-9 {
width:90%;
float:left;
}
.w-10 {
width:100%;
float:left;
}
.border-top-nav {
border:1px solid #777;
}
.border-main {
border-width:1px 1px 1px 1px;
border-style:solid;
border-color:#050505 #050505 #050505 #222;
}
.radius {
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.button {
height:8px;
line-height:8px;
padding:8px;
}
.font-bold {
font-weight:bold;
}
.bg-main {
background-color:#292929;
}
.bg-sk {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
}
.bg-white {
background-color: white;
}
.bg-gray {
background-color: gray;
}
.bg-green {
background-color:#49AF00;
}
.color-main {
color:#333;
}
.color-green {
color:#49AF00;
}
.color-white {
color:white;
}
.color-gray {
color:#777;
}
.color-555 {
color:#555;
}
展开
收起
1
条回答
写回答
写回答
-
开发这个是盒模型实现的问题，不是BUG，具体解决办法可以通过
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top2019-07-17 19:21:48赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
