css - CSSマージンの折りたたみ（内側の折りたたみを許可し、外側の折りたたみを拒否）

Question

私は次の構造を持っています：

<div class="form-item">
 <label>Label</label>
 <input type="text" value="" size="23">
 <div class="description">
   <div class="msg">*Some description</div>
   <div class="msg">Error</div>
 </div>
</div>

フォームアイテムはたくさんあります。親（フォームアイテム）で折りたたむにはラベルと説明の余白が必要です。2つのフォームアイテムの余白は折りたたんではいけません。

なぜそれが必要なのですか？さて、私はパディングを使用しますが、ラベルと説明はオプションであるため、親と一緒に折りたたむ必要があるマージンが必要です。さらに、説明にはゼロ（非表示）から多くのメッセージが含まれる場合があり、説明マージンで折りたたむ必要があり、すべてのメッセージが非表示の場合はフィールド全体を非表示にする必要があります。

PS私はIE7のサポートが必要です:)

基本的なCSSを編集します。

.form-item{
    margin: 7px 0 10px;
}
.form-item legend{
    margin: 5px 0;
}
.form-item .description{
    margin: 2px;
}
.description .msg{
    margin: 1px 0;
}

総括する：

1. 2つのフォームアイテム間のスペース：17px（マージンは折りたたまれません）。
2. トップフォームアイテムのマージン：7px（5pxは7pxで折りたたまれます）;
3. 下部フォームアイテムのマージン：10px（2pxは10pxで折りたたまれます）;