为什么这些日文字符的顶级值不同？

Question

我试图找出为什么“コンシェルジュ”的div与包含“警备”和“洗濯”的div的顶部不同。你必须实际运行代码片段才能看到我的意思，但在第一行第一行的第二行和第三行之上的前3个像素......我为什么不知所措。这是一种语言吗？在自然的意义上，我如何让它们具有相同的顶部？我不想使用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

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

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

Answer 2

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;