font-sizeを変えずに要素の高さを変えたい。

Question

前提・実現したいこと

ddタグの要素の高さを24pxから32pxに変えたい。

発生している問題・エラーメッセージ

模写をしておりますが、font系プロパティ（size,family,weight）、line-heightを模写サイトと同じ値にしているのにddタグの要素の高さが合わないです。

該当のソースコード

<section class="location">
<h2 class="sec-tit">Location</h2>
<div class="location-inner">
<dl class="location-def">
<dt class="location-dtit"><span>LOCATION</span></dt>
<dd class="location-data"><span>location.location.location.location.location.(<a href="" class="location-btn">地図</a>)</span></dd>

</dl>
<dl class="location-def location-margin">
<dt class="location-dtit">LOCATION</dt>
<dd class="location-data"><span>location.location.location.location.location.(<a href="" class="location-btn">地図</a>)</span></dd>

</dl>
<dl class="location-def location-margin">
<dt class="location-dtit">LOCATION</dt>
<dd class="location-data"><span>location.location.location.location.location.(<a href="" class="location-btn">地図</a>)</span></dd>
</dl>
</div>
</section><!-- /location -->

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  height: 100%;
  font-family: arial, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", Verdana, sans-serif;
}

.location {
  padding: 50px 20px 30px 20px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.location-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
}

.location-def {
  margin: 0;
  width: 100%;
  padding: 20px 16px 20px 20px;
  position: relative;
  background: #f3f3f3;
  font-weight: 500;
  box-sizing: border-box;
}

.location-margin {
  margin-top: 16px;
}

.location-dtit {
  left: 30px;
  font-weight: 600;
  letter-spacing: 0.6px;
  font-size: 1.6rem;
  margin: -0.5em 0 0;
  position: absolute;
  color: #282828;
  top: 50%;
  line-height: 1;
}

.location-data {
  margin: 0 0 0 200px;
  word-wrap: break-word;
  font-size: 1.6rem;
  color: #282828;
  font-weight: 500;
}

.location-btn {
  line-height: 1.5;
  color: #008cb2;
}

試したこと

heightを32pxにし、vertical-align:middle;を指定する➡️模写サイトと比べてテキストの位置がずれる。

テキストを模写サイトと同じ内容にする➡️効果なし

その他『fontサイズを変えずに要素の高さを変える』など調べましたが、解決に至るサイトが見つかりませんでした。

補足情報（FW/ツールのバージョンなど）

模写サイトと同じようにしたいのでfont系プロパティ（size,family,weight）やline-heightの値は変更せず、ddタグの高さを変えたいです。

模写サイト
https://galera.co.jp/#0

初心者のとても未熟な質問ですがどなたかご教授いただければ幸いです。

Answer 1

模写サイト
https://galera.co.jp/#0

をみたところ、ddの子要素のspanにline-height: 2;が指定されていました。
今回の場合は、以下の実装で実現できると思います。

.location-data span {
  line-height: 2;
}

Comments

[shuto0901]

ご回答ありがとうございます。
見落としていました…