【发布时间】：2019-07-27 08:28:41
【问题描述】：
我正在开发一个网站，我直接使用 html、css 和 javascript 对其进行编码。我有一个部分，其中我在 div 中有一个按钮，在 div 中有一个文本输入，在 div 中有另一个按钮堆叠在一起。出于某种原因，文本输入与顶部按钮之间的空间明显较小，而与底部按钮之间的空间更大。
我将创建一个简单的示例，因此我不必在此处发布所有代码，但我无法在我的项目之外复制它。我试过在 Chrome、Firefox、IE 和 Edge 中查看它，所有这些都存在同样的问题。我弄乱了包含 div 的尺寸，并尝试了几个不同的 css 关键字，但没有运气。
这是我的 index.html：
<html>
<head>
<title>DnDnBeyond</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
</head>
<body>
<div class="container">
<div class="ch_sheet">
<div class="ch_header">
<div class="ch_info_wrapper">
<div class="ch_info">
<div class="ch_info_name" id="name">Gilan</div>
<div class="ch_info_secondary">
<span class="ch_info_label" id="race">Half Elf</span>
<span class="ch_info_label" id="class">Ranger</span>
<span class="ch_info_label" id="level">4</span>
</div>
</div>
</div>
<div class="ch_stats">
<!--STR-->
<div class="ch_stat">
<div class="ch_stat_header">Strength</div>
<div class="ch_stat_primary">
<span id="str_primary" class="ch_stat_primary_label">+1</span>
</div>
<div class="ch_stat_secondary" id="str_secondary">12</div>
</div>
<!--DEX-->
<div class="ch_stat">
<div class="ch_stat_header">Dexterity</div>
<div class="ch_stat_primary">
<span id="dex_primary" class="ch_stat_primary_label">+3</span>
</div>
<div class="ch_stat_secondary" id="dex_secondary">16</div>
</div>
<!--CON-->
<div class="ch_stat">
<div class="ch_stat_header">Constitution</div>
<div class="ch_stat_primary">
<span id="con_primary" class="ch_stat_primary_label">+3</span>
</div>
<div class="ch_stat_secondary" id="con_secondary">16</div>
</div>
<!--INT-->
<div class="ch_stat">
<div class="ch_stat_header">Intelligence</div>
<div class="ch_stat_primary">
<span id="int_primary" class="ch_stat_primary_label">+3</span>
</div>
<div class="ch_stat_secondary" id="int_secondary">16</div>
</div>
<!--WIS-->
<div class="ch_stat">
<div class="ch_stat_header">Wisdom</div>
<div class="ch_stat_primary">
<span id="wis_primary" class="ch_stat_primary_label">+1</span>
</div>
<div class="ch_stat_secondary" id="wis_secondary">12</div>
</div>
<!--CHA-->
<div class="ch_stat">
<div class="ch_stat_header">Charisma</div>
<div class="ch_stat_primary">
<span id="cha_primary" class="ch_stat_primary_label">+1</span>
</div>
<div class="ch_stat_secondary" id="cha_secondary">12</div>
</div>
</div>
<div class="ch_health_wrapper">
<div class="ch_health">
<div class="ch_health_label_wrapper">
<span class="ch_health_label" id="health_label">Hit Points</span>
</div>
<div class="ch_hp">
<div class="ch_hp_adjuster">
<div class="ch_hp_adjuster_button">
<button class="ch_hp_heal_button" id="heal_button">Heal</button>
</div>
<div class="ch_hp_adjuster_input_wrapper">
<input type="number" class="ch_hp_adjuster_input"/>
</div>
<div class="ch_hp_adjuster_button">
<button class="ch_hp_damage_button" id="damage_button">Damage</button>
</div>
</div>
<div class="ch_hp_current">
<div class="ch_hp_label">Current</div>
<span class="ch_hp_number" id="current_hp">36</span>
</div>
<div class="ch_hp_sep">/</div>
<div class="ch_hp_max">
<div class="ch_hp_label">Max</div>
<span class="ch_hp_number" id="max_hp">44</span>
</div>
</div>
<div class="ch_death_saves"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
该部分在第 86-96 行附近，包含 div 具有类 ch_hp_adjuster。
以下是相关的 css 类：
.ch_health_wrapper {
flex: 25%;
text-align: center;
}
.ch_health {
margin: 5px;
display: inline-block;
width: 250px;
height: 90px;
border: 2px solid #B89A67;
border-radius: 15px;
}
.ch_health_label {
padding: 4px 4px 6px 4px;
font-size: 14px;
text-transform: uppercase;
font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
font-weight: 700;
}
.ch_hp {
display: flex;
}
.ch_hp_adjuster {
flex: 30%;
margin-left: 4px;
}
.ch_hp_adjuster_button {
}
.ch_hp_heal_button {
width: 75px;
background-color: white;
color: #40d250;
border: 1px solid #B89A67;
border-radius: 3px;
font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
text-transform: uppercase;
font-size: 10px;
cursor: pointer;
}
.ch_hp_adjuster_input {
width: 75px;
border: 1px solid #B89A67;
border-radius: 3px;
font-size: 14px;
text-align: center;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
.ch_hp_damage_button {
width: 75px;
background-color: white;
color: #9C2B1B;
border: 1px solid #B89A67;
border-radius: 3px;
font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
text-transform: uppercase;
font-size: 10px;
cursor: pointer;
}
.ch_hp_display {
flex: 70%;
}
.ch_hp_numbers {
display: flex;
}
.ch_hp_label {
color: #58180D;
font-size: 10px;
text-transform: uppercase;
font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
font-weight: 700;
}
.ch_hp_current {
flex: 30%;
}
.ch_hp_number {
font-size: 26px;
font-weight: 500;
}
.ch_hp_sep {
padding-top: 10px;
flex: 10%;
color: #58180D;
font-size: 26px;
text-transform: uppercase;
font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
font-weight: 700;
}
.ch_hp_max {
flex: 30%;
}
很抱歉发布了这么多代码，但我不知道究竟是什么导致了这里的问题。
如果你运行代码并查看右上角，你会看到我所说的间距问题。
非常感谢任何帮助。谢谢。
【问题讨论】：