定義リストで作る、用語とその説明[質問と答え]

CSSで定義リストdl,dt,ddを見栄えよく変えています。

質問dtと答えddの先頭にはCSSで背景画像を入れています。

HTMl

<div class="mod_qalist">
<dl>
<dt><strong>質問はこちらでよろしいでしょうか？</strong></dt>
<dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd>
</dl>
<dl>
<dt><strong>質問はこちらでよろしいでしょうか？</strong></dt>
<dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd>
</dl>
<dl>
<dt><strong>質問はこちらでよろしいでしょうか？<br />
改行しました。<br />
さらに改行しました。</strong></dt>
<dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd>
</dl>
<dl>
<dt><strong>質問はこちらでよろしいでしょうか？</strong></dt>
<dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。<br />
改行しましたよ。</dd>
</dl>
<!-- mod_qalist_end --></div>

CSS

.mod_qalist dl{
	padding:5px;
	border-bottom:solid 1px #819744;
}
.mod_qalist dt{
	min-height:50px;
	height:auto!important;
	height:50px;
	margin:20px 0 0 0;
	padding:0 0 0 60px;
	font-weight:bold;
	background:transparent url('q.jpg') no-repeat top left scroll;
}
.mod_qalist dd{
	min-height:50px;
	height:auto!important;
	height:50px;
	margin:10px 0 0 20px;
	padding:0 0 0 60px;
	background:transparent url('a.jpg') no-repeat top left scroll;
}