dd dt の高さが揃いません。

dtとddの高さが揃わず悩んでいます、丸1日かけても解決できませんでした。
ddが少し下がって表示されてしまいます。

検証すると
ddに何故かmaginがかかっていているのですが、それが原因でしょうか？
そうだとしても、なぜ左にmarginがついているのかもわかりません。お助けいただければ幸いです。

よろしくお願いいたします。

HTML
1<section class="l-section cf">
2	<div class=" l-wrap cf">
3		<p class="u-mb20">*********<br>************</p>
4		<div class="profbox cf">
5			<div class="imgface">
6				<img src="" alt="">
7			</div>
8			<div class="boxright">
9				<dl class="companyprof cf u-mb20">
10					<dt>屋号：</dt>
11					<dd>*******</dd>
12					<dt>所在地：</dt>
13					<dd>*******</dd>
14					<dt>お問合せ：</dt>
15					<dd>*******</dd>
16					<dt>事業内容：</dt>
17					<dd>*******</dd>
18				</dl>
19				<dl class="companyprof cf">
20				<h3>名前</h3>
21					<dt>Facebook:</dt><dd><a href="https://www.facebook.com/*********">yuichi.tokuda.5</a></dd>
22					<dt>Instagram:</dt><dd><a href="http://instagram.com/**********">underline_t</a></dd>
23				</dl>
24			</div>
25		</div>
26	</div>
27</section>

CSS
1.profbox{
2    width: 960px;
3    margin: 0;
4    max-width: 100%;
5}
6
7.imgface{
8    float:left;
9    width: 160px;
10    text-align: left;
11}
12.boxright{
13    float: right;
14    width: 760px;
15}
16
17.cf:after{
18    clear: both;
19}
20
21.cf:before,.cf:after{
22content: "";
23    display: table;
24}
25
26
27.companyprof dt{
28    float: left;
29    display: block;
30    width: 20%;
31    font-weight: bold;
32}
33.companyprof dd{
34    float: right;
35    display: block;
36    width: 80%;
37    font-size: 13px;
38}
39

行動規範の内容に同意します

回答2件

ベストアンサー

なぜ左にmarginがついているのかもわかりません。

これはブラウザが勝手に付与するスタイルです。
ddにmargin: 0を付けるだけでも解決しますが、普通は reset.css 等を入れてデフォルトスタイルを打ち消すことが多いです。
ただしmarginを消しても表示は綺麗にはなりません。これはfloatを使用しているためです。

横並びレイアウトのためにfloatを使うのは現代では最早アンチパターンなのでdisplay: flexやdisplay: gridあるいはdisplay: inline-blockなどを使って作り直すことをお勧めします。これらは使い方さえ一度習得すれば簡単に横並びレイアウトが作れるようになります（想定ブラウザで使えるかはcaniuseをご確認ください）。

投稿2021/05/01 07:24

編集2021/05/01 07:31

Masa-Shin

総合スコア269

高さってどういうことかよく分かりませんが<dt>と<dd>を理解していないのかな？という予想回答。

とりあえず口で説明するより両方のMDNのリファレンス見る方が早いと思う。

追記

適当に予想回答しかしてなかったんで追記。

他の方も回答されているが、floatは使いづらさの極みみたいなプロパティなので、
ゴミ箱にポイしてフレックスレイアウトにした方が良いですね。
作り直すの時間かかるじゃんと思うかもしれませんが、floatが生み出す不具合の数を考えれば
圧倒的に楽です。

見た所、ブラウザのデフォルトのcssに引っかかってるようなので、
リセットcssを入れましょう。

その通りに調べればすぐ出てくると思いますがこれが何かというと各ブラウザのデフォルトで
掛かっているcssを文字通りリセットする物です。こいつを適用したいcssの前に適用させれば
真っ新の状態にデザインを適用出来るって訳です。

投稿2021/05/01 06:17

編集2021/05/01 07:40

K_3578

総合スコア1282

nomad246

2021/05/01 06:25

コメントありがとうございます！意図が言葉足らずでした、すみません。 dt、ddで表tableのように現したくflotで左右に振り分けしたのですが、うまくいかなかったのです。屋号：　　　＊＊＊＊所在地：　　＊＊＊＊お問合せ：　＊＊＊＊のようにしたかったのですが、＊＊＊＊の部分が下がって表示されてしまうのです。