开发者社区> 问答> 正文

关于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">&nbsp;
        <!-- 就这里 -->
        <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;
}

展开
收起
杨冬芳 2016-05-31 13:05:31 3743 0
1 条回答
写回答
取消 提交回答
  • Zzz
    开发

    这个是盒模型实现的问题,不是BUG,具体解决办法可以通过
    1.给父容器box加overflow:hidden;属性
    2.父容器box加border除none以外的属性
    3.用父容器box的padding-top代替margin-top

    2019-07-17 19:21:48
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
Top 5 mistakes when wriiting a 立即下载
低代码开发师(初级)实战教程 立即下载