我不明白为什么在这个设置中,顶部填充比底部填充大几倍。尝试调整周围的东西来找到罪魁祸首的属性(property),但到目前为止还一无所获。我确实注意到,我不小心在跨度后留下了一个“,问题就消失了,但不确定这有什么关系。
https://jsfiddle.net/3n0yuzs3/1/
body
{
font-family: sans-serif;
}
#window
{
background-color: black;
color: white;
display: flex;
flex-direction: column;
opacity: 1;
left: 50%;
bottom: 0px;
position: fixed;
width: auto;
height: auto;
min-width: 600px;
min-height: auto;
max-width: 80vw;
max-height: 80vh;
transform: translateX(-50%);
outline: 0px;
cursor: default;
z-index: 5000002;
zoom: 1;
}
#container
{
overflow-y: auto;
overflow-x: hidden;
border: none;
outline: 0;
margin: 0;
flex-grow: 1;
}
#content
{
font-size: 22px;
text-align: center;
overflow-wrap: break-word;
padding-top: 1.6em;
padding-bottom: 1.6em;
padding-left: 1.6em;
padding-right: 1.6em;
}
.snack_msg
{
padding-right: 200px;
float:left;
}
.snack_btn
{
color:#5fce49;
text-transform: uppercase;
letter-spacing:3px;
cursor:pointer;
float:right;
}
<div id='window'>
<div id='container'>
<div id='content'>
<span class='snack_msg'>New message arrived</span>
<span class='snack_btn' onclick='open_snack_message()'>open</span>
</div>
</div>
</div>
最佳答案
问题在于 float 元素而不是填充。如下所示,所有尺寸的填充都相同:
如果你仔细检查,你还会发现你的高度等于0,因为你有 float 元素,并且由于父元素不 float ,它会折叠(这意味着没有高度)。要解决此问题,您需要将 oveflow:auto
添加到 #content
。
body {
font-family: sans-serif;
}
#window {
background-color: black;
color: white;
display: flex;
flex-direction: column;
opacity: 1;
left: 50%;
bottom: 0px;
position: fixed;
width: auto;
height: auto;
min-width: 600px;
min-height: auto;
max-width: 80vw;
max-height: 80vh;
transform: translateX(-50%);
outline: 0px;
cursor: default;
z-index: 5000002;
zoom: 1;
}
#container {
overflow-y: auto;
overflow-x: hidden;
border: none;
outline: 0;
margin: 0;
flex-grow: 1;
}
#content {
font-size: 22px;
text-align: center;
overflow-wrap: break-word;
padding-top: 1.6em;
padding-bottom: 1.6em;
padding-left: 1.6em;
padding-right: 1.6em;
overflow: auto;
}
.snack_msg {
padding-right: 200px;
float: left;
}
.snack_btn {
color: #5fce49;
text-transform: uppercase;
letter-spacing: 3px;
cursor: pointer;
float: right;
}
<div id='window'>
<div id='container'>
<div id='content'>
<span class='snack_msg'>New message arrived</span>
<span class='snack_btn' onclick='open_snack_message()'>open</span>
</div>
</div>
</div>
以下是一些有用的问题,您可以通过这些问题收集更多信息和更多方法来防止这种行为:
How do you keep parents of floated elements from collapsing?
Why does 'overflow: auto' clear floats? And why are clear floats needed?
关于html - padding-top "bigger"比 padding-bottom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47958779/