HTML CSS一些填充和邊距
[英]Html CSS Some padding and margin
問題描述
誰能告訴我為什么我正在使用的父類“ login”退出類“ Login2”
#login2 {
width:100%;
height:100%;
background-color:#e8eceb;
}
完整代碼演示
6 個解決方案
解決方案1
2 已采納 2014-12-19 14:42:37
誰能告訴我為什么類“ Login2”從父類“ login”中消失
問題
#login和#login2元素的計算高度均為300px。 您在這里所做的工作是忽略將“登錄到管理面板”文本包含在#login元素中#login2元素旁邊。
此文字本身的計算高度為23px（在Chrome中）。 這意味着已經將#login2元素下推了23px。 最重要的是，我們的#login2元素還有一個margin-top屬性設置為5px，這意味着我們的#login2元素總共下推了28px。 因此，從#login頂部到#login2底部的#login2為328px- 而不是我們要查找的300px。
一個解法
解決此問題的一種簡便方法是將“登錄到管理面板”文本包裝在其自己的元素中，該元素具有自己定義的固定高度。 然后考慮該元素的高度和 #login2元素的高度中的margin-top ：
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; }
<div id="container"> <div id="login"> <p>Login to Admin Panel</p> <div id="login2"> <div id="buttonPlace"> </div> </div> </div> </div>
我在此代碼段中所做的是將您的“登錄到管理面板”文本包裝在<p>標記內，並設置了樣式，以將其height和line-height為25px，並刪除瀏覽器可能在其中添加的任何邊距本身。 然后，我做了一些數學#login2元素需要達到#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
解決方案2
0 2014-12-19 14:35:36
解決方案3
0 2014-12-19 14:42:30
這是由兩件事引起的：
- 首先是
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
解決方案4
0 2014-12-19 14:44:36
嘗試將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>
解決方案5
0 2014-12-19 14:45:39
我建議通過使用CSS偽元素:before和/或:after 來減少元素的數量，而完全不需要＃login2元素 。
為了使該表格具有美觀的外觀，我刪除了您的＃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*/
}
解決方案6
0 2014-12-19 14:45:44
對於您的情況，我將只對標題本身進行着色，並讓＃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/
HTML CSS標簽的div內部（div顯示：inline-block;）出於某種原因添加了填充/邊距？
[英]HTML CSS label's inside div (div has display: inline-block;) adds padding/margin for some reason?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.