我在网站上工作，我直接从 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%;
}
很抱歉发布了这么多代码，但我不知道是什么导致了这里的问题。
如果您运行代码并查看右上角，您会看到我所说的间距问题。
非常感谢任何帮助。谢谢。
最佳答案
问题是第一个按钮上方还有一点空间 - 但您看不到它，因为它上面没有任何东西。有几种方法可以去掉按钮上方的这个小空间，但最快的方法是使用 line-height: 0;
例子:
.ch_hp_adjuster_button {
line-height: 0;
/* margin: 1px 0; */ /* Uncomment this if you still want a little spacing */
}
关于html - 如何使用 css 和 flexbox 修复输入的垂直间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57228222/