Html CSS一些填充和边距

时间：2014-12-19 14:33:48

标签： html css

有人可以告诉我为什么上课＆＃34; Login2＆＃34;离开父母＆＃34;登录＆＃34; 我正在使用

#login2 {
  width:100%;
  height:100%;
  background-color:#e8eceb;
}

Full code demo

6 个答案:

答案 0 :(得分：2)

  

有人可以告诉我为什么上课＆＃34; Login2＆＃34;离开父母＆＃34;登录＆＃34;

问题

您的#login和#login2元素的计算高度均为300px。你在这里做的事情是忽略了包括＆＃34;登录管理面板＆＃34;与#login2元素中的#login元素一起存在的文本。

此文本本身的计算高度为23像素（在Chrome中）。这意味着已将#login2元素按下23px。最重要的是，我们的#login2元素也将margin-top属性设置为5px，这意味着我们的#login2元素总共被推下了28px。因此，从#login顶部到#login2底部的距离是328px - 而不是我们正在寻找的300px。

解决方案

解决此问题的一种简单方法是简单地将您的＆＃34;登录到管理面板＆＃34;文本在其自己的元素中定义了自己的固定高度;然后在margin-top元素的高度中考虑该元素的高度和 #login2：

＆＃13;
＆＃13; 
body{
    background-color: #bdd7d1;
}

#container {
    width: 320px;
    height: 300px;
    background-color: #d0e1dd;
    border: 1px solid white;
    padding:10px;
    margin-left:auto;
   margin-right:auto;
}
#login  {

    width: 100%;
    height: 100%;
    text-align: center;
    font-variant: small-caps;
    font-size: 20px;
    background-color: #404040;
    border: 1px solid #404040;
    color: white;
}
#login2 {
    margin-top:5px;
    width:100%;
    height:270px;
    background-color:#e8eceb;
}

#login p {
  height: 25px;
  line-height: 25px;
  margin: 0;
}
＆＃13; 
<div id="container">
  <div id="login">
    <p>Login to Admin Panel</p>
    <div id="login2">
      <div id="buttonPlace">
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我在此代码段中所做的是将您的＆＃34;登录到管理面板＆＃34; <p>代码中的文字，并将其设置为将其height和line-height设置为25px，并删除浏览器可能添加的任何边距。然后，我做了一些数学计算，以确定#login2元素需要的高度，以使其完美契合：

h = Height of #login element
m = Top margin of #login2 element
p = Height of newly-added p element
d = Required height

h - m - p = d

300px - 25px - 5px = 270px

答案 1 :(得分：0)

你必须改变：

height:100%;

为：

height:auto;

Jsfiddle演示：http://jsfiddle.net/sr7kr3gz/13/

答案 2 :(得分：0)

由两件事引起：

  • 首先是margin-top值，其次是文字的大小登录管理员面板

您可以做的是为标题指定包装并设置固定高度：

<div class="title">Login to Admin Panel</div>

#login .title {
    height:20px;
    line-height:20px;
}

然后使用calc设置面板的正确height：

#login2 {
    width:100%;
    height:calc(100% - 20px);
    background-color:#e8eceb;
}

UpdatedFiddle

答案 3 :(得分：0)

尝试将overflow: hidden放在父#login上。这样的事可能是你想要的：

body {
  background-color: #bdd7d1;
}
#container {
  width: 320px;
  height: 300px;
  background-color: #d0e1dd;
  border: 1px solid white;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}
#login {
  width: 100%;
  height: 100%;
  text-align: center;
  font-variant: small-caps;
  font-size: 20px;
  background-color: #404040;
  border: 1px solid #404040;
  color: white;
  overflow: hidden;
}
#login2 {
  margin-top: 5px;
  width: 100%;
  height: 100%;
  background-color: #e8eceb;
}
<body>
  <div id="container">
    <div id="login">Login to Admin Panel
      <div id="login2">
        <div id="buttonPlace"></div>
      </div>
    </div>
  </div>
</body>

答案 4 :(得分：0)

我建议您使用:before和/或:after css伪元素减少元素数量， 完全不需要＃login2元素

LIVE DEMO

为了使形式美观，我删除了你的＃login2并将其替换为伪元素：after。

body {
    background-color: #bdd7d1;
}
#container {
    width: 320px;
    height: 300px;
    background-color: #d0e1dd;
    border: 1px solid white;
    padding:10px;
    margin-left:auto;
    margin-right:auto;
}
#login {
    width: 100%;
    height: 100%;
    position:relative;
    text-align: center;
    font-variant: small-caps;
    font-size: 20px;
    background-color: #404040;
    border: 1px solid #404040;
    color: white;
    overflow:hidden;
}
#login:after {
    content:"";
    position:absolute;
    margin-top:5px;
    width:100%;
    height: calc(100%);
    background-color:#e8eceb;
    left:0;
    top:22px;
}
<div id="container">
    <div id="login">Login to Admin Panel
        <div id="buttonPlace"></div>
    </div>
</div>

要“隐藏”溢出，您可以使用父类的overflow:hidden属性。

这种影响背后的原因是：

您已将两个'登录'的大小设置为100％，如下所示：

+-------+        +-------+
|       |        |       |
|       |        |       |
|       |        |       |
|       |        |       |
+-------+        +-------+

因此它们的高度（最初）相同。

但是，当你将文字放在一个文件中时，你会得到这个：

+-------+        
|TEXT   |        
|       |        
|       |        
|       |               
+-------+ 
+-------+  <-- inner container set as 100%; so in effect it has been 'pushed down'

所以为了做到这一点，你需要确保你的子元素实际上是你需要它的大小，减去文本的高度。

替代

使用overflow：hidden的替代方法是使用高度计算，因此最终会得到这样的结果：

#login:after {
    content:"";
    position:absolute;
    margin-top:5px;
    width:100%;
    height: calc(100% - 27px); /*computed height of 'white area' required*/
    background-color:#e8eceb;
    left:0;
    top:22px; /*Height of text*/
}

答案 5 :(得分：0)

对于你的情况，我只会为标题本身着色并让＃login2自动调整高度，因为它相对于父DIV #login：

<强> HTML ：

<div id="container">
  <div id="login">
    <span class="hl">Login to Admin Panel</span>
    <div id="login2">
      <div id="buttonPlace"></div>
    </div>
  </div>
</div>

<强> CSS： 

#login  {
    width: 100%;
    height: 100%;
    text-align: center;
    font-variant: small-caps;
    font-size: 20px;
    background-color: #e8eceb;
    border: 1px solid #404040;
    color: white;
}
#login2 {
    margin-top:5px;
}
#container .hl {
    display: block;
    background: #404040;
}

小提琴：http://jsfiddle.net/sr7kr3gz/19/

相关问题
最新问题