Question

HTML：

<div id="wrap">
 <div id="main">
  <p id="title">home</p>
 </div>
</div>

CSS：

    body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#wrap {
    background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
    background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
    background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #0662BF));
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
    background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #0662BF 100%);
    height:100%;
    padding:0;
    margin:0;
}

#main {
    height: 100%;
    margin-right: 15%;
    margin-left: 15%;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    padding: 0px 15px 15px 15px;
    background-color: #FFFFFF;
    text-align: center;
}

我觉得这样的问题是愚蠢的，因为我觉得答案非常简单，但我的主要部分比包裹更长，我不明白为什么。我可以让主div更短，所以它匹配包裹，但我想做得恰到好处。

JSFiddle

Answer 1

由于填充。删除底部填充，或添加到#main

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Answer 2

您的#main-div底部有15px的填充。将此添加到您的CSS：

padding: 0;

或者更好地将您的css代码从padding: 0px 15px 15px 15px;修改为

padding: 0px 15px 0px 15px;

在此处查看您的更新小提琴：http://jsfiddle.net/k7tRy/

Answer 3

你的div #main有一些填充底部。

在您的Css课程中：padding: 0px 15px 15px 15px;。

这意味着：

padding-top: 0px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;

由于填充属性，你的div占用的时间超过100%。（填充：填充是控件内部的额外空间。）

您应该/可以使用保证金而不是填充。

Answer 4

<style>
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#wrap {
    background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
    background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
    background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #0662BF));
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
    background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #0662BF 100%);
    height:100%;
    padding:0;
    margin:0;
}

#main {
    height: 100%;
    margin-right: 15%;
    margin-left: 15%;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    <!-- Check the change -->
    padding: 0px 15px 0px 15px;
    background-color: #FFFFFF;
    text-align: center;
}
</style>

<div id="wrap">
 <div id="main">
  <p id="title">home</p>
 </div>
</div>

我同意上述开发者。这只是因为你在主div的底部给了一个额外的填充。

为了谨慎起见，请务必在编码时检查约定：

填充：top-padding，right-padding，bottom-padding，left-padding 。（只是要记住：它以顺时针方式工作）

希望它有所帮助。快乐编码：）

分数超过100％

4 个答案: