dl ddの横並び時の余白を無くしたい

実現したいこと

住所／〜〜という記述をdl dd dtで書いています。
横並びにした上で複数行にしたいです。

dlとdtの間に開いた隙間をなくして両者を詰めたい

前提

現在とある観光地の紹介ページを作成しています。
section内に写真と紹介文と所在地や営業時間などの詳細が記載されるようにしています。
その中の詳細部分をdl dt ddでマークアップし、横並び後3行程に改行させています。
今回はtable形式ではなく、住所／〜〜　営業時間／〜〜　休業日／〜〜という風にしたいので
display:flex;ではなく、dd dtにそれぞれdisplay:inline-block;をかけ、dtにのみwidth71%で改行されるように指定しています。
（そこらへんのやり方もこれであっているのか？もっと違うやり方があるのでは？と悩みながら行き着いた方法です。）
すると、住所／〜〜と意図しない場所に隙間が生まれてしまい困っています。
基本的にネットでdd dtの横並びと調べるとdisplay:flexのやり方ばかりがヒットし、自力で解決ができませんでした。
アドバイス頂けたらと思います。よろしくお願いいたします。

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

エラーメッセージ
```なし

### 該当のソースコード

```ここに言語名を入力 
HTML5、CSS
ソースコード
 <div class="about">
      <p>
        沖縄で一度は絶対に食べたいソーキそば。<br>
        店舗は店主の祖母の家という、築60年の琉球家屋。<br>
        仏壇のある座敷にテーブルを並べた空間で、沖縄そばを味わえる。<br>
        スープは鰹節を使用し、後味はさっぱり。<br>
        別添えのフレッシュなよもぎで爽涼感もアップ。
       </p>
        <dl>
            <dt>住所</dt>
            <dd>沖縄県那覇市国場40-1</dd>
            <dt>営業時間</dt>
            <dd>11時～16時、土・日～18時（売り切れ次第終了）</dd>
            <dt>休日</dt>
            <dd>月</dd>
         </dl>
 </div>

.about {
    margin: 30px 0 0 15px;
}

.about dl {
    line-height: 1.8;
    background-color: #2e8ae6;
    margin: 40px 0 0 10px;
    width: 65%;
    padding: 30px 0 30px 20px;
}

.about dl dt:first-of-type {
    background-image: url(images/map_icon.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left;
    padding: 3px 10px 0 25px;
}

.about dl dt:nth-of-type(2) {
    background-image: url(images/time_icon.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left;
    padding: 3px 10px 0 25px;
}

.about dl dt:nth-last-child(2) {
    background-image: url(images/calender_icon.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left;
    padding: 3px 10px 0 25px;
}

.about dl dt,
.about dl dd {
    color: #fff;
    display: inline-block;
    margin-inline-start: 0;
}

dt::after {
    content: "／";
    background-color: deeppink
}

.about dl dd {
    width: 71%;
    background-color: gold;
}

### 試したこと
googlechromのデベロッパーツールにて余白の犯人がどれか？の確認をしましたが、見つけられませんでした。

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

ここにより詳細な情報を記載してください。

回答1件

ベストアンサー

dt に対して指定している padding: 3px 10px 0 25px; の右 padding では？

dl 要素では、dt と dd を覆うように div 要素を設定できます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl#名前と値のグループを_div_要素で包む

html
1<dl>
2  <div>
3    <dt>住所</dt>
4    <dd>沖縄県那覇市国場40-1</dd>
5  </div>
6  <div>
7    <dt>営業時間</dt>
8    <dd>11時～16時、土・日～18時（売り切れ次第終了）</dd>
9  </div>
10  <div>
11    <dt>休日</dt>
12    <dd>月</dd>
13  </div>
14</dl>

このようなマークアップをしてスタイルを調整した方が合理的ではないでしょうか。

投稿2023/03/25 08:13

arcxor

総合スコア2457

回答へのコメント

chooko

2023/03/25 08:31

回答くださりありがとうございます！ dtのpaddingはdtの前にアイコンを指定した際の物なので、悩んでいた隙間とは関係ありませんでした。が！！アドバイスいただいたdivでマークアップをしCSSも指定し直したら隙間が埋まり簡単に横並びさせることができました…！！！あんなに悩んでいたのが嘘の様でした。ありがとうございました（ ; ; ）