为什么这些日文字符有不同的最高值？

Question

我想弄清楚为什么带有“コンシェルジュ”的 div 与包含“警备”和“洗濯”的 div 的顶部不同。您实际上必须运行代码片段才能明白我的意思，但在第一行第一行的前 3 个像素高于该行的第二和第三 div...我'我不知道为什么。这是语言的问题吗？在自然意义上，我如何使它们具有相同的顶部？我不想使用 Javascript 强制顶部相同，因为我已经使用顶部值来确定内容 div 所在的行，因此这可能会变成循环。

这个有一个英文版本，唯一的区别是内容的措辞和英文（以及普通话和韩语），我没有这个问题。好像是日文特有的东西，日文有什么要注意的吗？

.DemoQuest {
    text-align: center;
    font-family: Verlag, Arial;
    color: white;
    background: black;
}

.DemoQuest .Span {
    margin-right: 1%;
    margin-left: 2.5%;
    text-align: center;
}

.ResponseSet {
    margin-left: 2%;
    margin-right: 2%;
}

.DemoResp {
    display: inline-block;
    padding-top: .5%;
    padding-bottom: .5%;
    width: 32%;
}

.ResponseText {
    display: none;
}

input {
    display: none;
}

.DemoResp .Wrapper {
    text-align: center;
    vertical-align: top;
    background-color: #C4C4C4;
    border-radius: 3px;
    color: black;
    padding: 8px 8px;
    padding-top: 8px;
    transition-duration: 0.4s;
    font-size: 16px;
    vertical-align: middle;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}

.DemoQuest .DemoResp .Selector .Wrapper {
    display: grid;
}

<div id="d2929b66837440708d3db2ed658ca0c6" class="DemoQuest">
  <div class="Span">以下、ホテル内でご利用いただいたサービスをお選び下さい</div>
  <div class="ResponseSet Below">
   <div id="96e3902628074785a3065df70c644566" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_96e3902628074785a3065df70c644566" name="cb_96e3902628074785a3065df70c644566" value="1"><div id="123" class="Wrapper"><div class="ResponseContent">コンシェルジュ</div></div></span>
    <span class="ResponseText">コンシェルジュ</span>
   </div>
   <div id="8d69877355cd4f05a4db3539c2f67fd6" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_8d69877355cd4f05a4db3539c2f67fd6" name="cb_8d69877355cd4f05a4db3539c2f67fd6" value="1"><div id="123" class="Wrapper"  for="cb_8d69877355cd4f05a4db3539c2f67fd6"><div class="ResponseContent">警備</div></div></span>
    <span class="ResponseText">警備</span>
   </div>
   <div id="de5a147b403f43568d44169142ae4a98" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_de5a147b403f43568d44169142ae4a98" name="cb_de5a147b403f43568d44169142ae4a98" value="1"><div id="123" class="Wrapper"  for="cb_de5a147b403f43568d44169142ae4a98"><div class="ResponseContent">洗濯</div></div></span>
    <span class="ResponseText">洗濯</span>
   </div>
   <div id="346cb8895aa34c4ebf879814f197e866" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_346cb8895aa34c4ebf879814f197e866" name="cb_346cb8895aa34c4ebf879814f197e866" value="1" ><div id="123" class="Wrapper"  for="cb_346cb8895aa34c4ebf879814f197e866"><div class="ResponseContent" style="height: 52px; top: 13px;">お土産屋</div></div></span>
    <span class="ResponseText">お土産屋</span>
   </div>
   <div id="6750438a3faf49a8afbbca7c23289a42" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_6750438a3faf49a8afbbca7c23289a42" name="cb_6750438a3faf49a8afbbca7c23289a42" value="1" ><div id="123" class="Wrapper"><div class="ResponseContent">バンニャンツリースパ</div></div></span>
    <span class="ResponseText">バンニャンツリースパ</span>
   </div>
   <div id="fd64fa6d551848d18943f7210633045b" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_fd64fa6d551848d18943f7210633045b" name="cb_fd64fa6d551848d18943f7210633045b" value="1"><div id="123" class="Wrapper"  for="cb_fd64fa6d551848d18943f7210633045b"><div class="ResponseContent">フィットネスセンター</div></div></span>
    <span class="ResponseText">フィットネスセンター</span>
   </div>
  </div>
 </div>

Answer 1

.DemoQuest {
    text-align: center;
    font-family: Verlag, Arial;
    color: white;
    background: black;
}

.DemoQuest .Span {
    margin-right: 1%;
    margin-left: 2.5%;
    text-align: center;
}

.ResponseSet {
    margin-left: 2%;
    margin-right: 2%;
}

.DemoResp {
    display: inline-block;
    padding-top: .5%;
    padding-bottom: .5%;
    width: 32%;
}

.ResponseText {
    display: none;
}

input {
    display: none;
}

.DemoResp .Wrapper {
    text-align: center;
    vertical-align: top;
    background-color: #C4C4C4;
    border-radius: 3px;
    color: black;
    height: 30px; /* <-- this is what i have add*/
    padding: 8px 8px;
    padding-top: 8px;
    transition-duration: 0.4s;
    font-size: 15px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}

.DemoQuest .DemoResp .Selector .Wrapper {
    display: grid;
}

<div id="d2929b66837440708d3db2ed658ca0c6" class="DemoQuest">
  <div class="Span">以下、ホテル内でご利用いただいたサービスをお選び下さい</div>
  <div class="ResponseSet Below">
   <div id="96e3902628074785a3065df70c644566" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_96e3902628074785a3065df70c644566" name="cb_96e3902628074785a3065df70c644566" value="1"><div id="123" class="Wrapper"><div class="ResponseContent">コンシェルジュ</div></div></span>
    <span class="ResponseText">コンシェルジュ</span>
   </div>
   <div id="8d69877355cd4f05a4db3539c2f67fd6" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_8d69877355cd4f05a4db3539c2f67fd6" name="cb_8d69877355cd4f05a4db3539c2f67fd6" value="1"><div id="123" class="Wrapper"  for="cb_8d69877355cd4f05a4db3539c2f67fd6"><div class="ResponseContent">警備</div></div></span>
    <span class="ResponseText">警備</span>
   </div>
   <div id="de5a147b403f43568d44169142ae4a98" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_de5a147b403f43568d44169142ae4a98" name="cb_de5a147b403f43568d44169142ae4a98" value="1"><div id="123" class="Wrapper"  for="cb_de5a147b403f43568d44169142ae4a98"><div class="ResponseContent">洗濯</div></div></span>
    <span class="ResponseText">洗濯</span>
   </div>
   <div id="346cb8895aa34c4ebf879814f197e866" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_346cb8895aa34c4ebf879814f197e866" name="cb_346cb8895aa34c4ebf879814f197e866" value="1" ><div id="123" class="Wrapper"  for="cb_346cb8895aa34c4ebf879814f197e866"><div class="ResponseContent" style="height: 52px; top: 13px;">お土産屋</div></div></span>
    <span class="ResponseText">お土産屋</span>
   </div>
   <div id="6750438a3faf49a8afbbca7c23289a42" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_6750438a3faf49a8afbbca7c23289a42" name="cb_6750438a3faf49a8afbbca7c23289a42" value="1" ><div id="123" class="Wrapper"><div class="ResponseContent">バンニャンツリースパ</div></div></span>
    <span class="ResponseText">バンニャンツリースパ</span>
   </div>
   <div id="fd64fa6d551848d18943f7210633045b" class="DemoResp">
    <span class="Selector"><input type="checkbox" id="cb_fd64fa6d551848d18943f7210633045b" name="cb_fd64fa6d551848d18943f7210633045b" value="1"><div id="123" class="Wrapper"  for="cb_fd64fa6d551848d18943f7210633045b"><div class="ResponseContent">フィットネスセンター</div></div></span>
    <span class="ResponseText">フィットネスセンター</span>
   </div>
  </div>
 </div>

Answer 2

据我了解，您必须将 vertical-align: top 添加到 .DemoResp css 才能解决此问题。

.DemoResp {
    display: inline-block;
    padding-top: .5%;
    padding-bottom: .5%;
    width: 32%;
    vertical-align: top;
}

为什么这些日文字符有不同的最高值？

Why do these Japanese characters have different top values?

html

css

unicode

translation