私が望むレイアウトを実現するために、空の div を配置することの欠点があるかどうか疑問に思っていました。乱雑なコードに追加されることがわかっているため、非表示の div を回避する他の方法はありますか。
私が実証しようとしていることについては、以下の画像を参照してください。
ご覧のとおり、左側の箇条書きは h2 要素と同じ高さですが、箇条書きの前に h2 要素を追加すると、段落のレベルまで下げられます (これが私の望みです)。明らかに、この h2 要素を非表示にして、目的の効果を達成することができますが、これを行うためのより専門的な方法はありますか?
しかし、なぜあなたはそれをしたいのですか？何margin-topのための財産？
私はここで少し簡単に説明します。最初に学ぶべきfloatsです後で髪を引っ張るpositioningblockinlinemargins,
div'sまた、空よりも汚れたマークアップに固執したい場合brは、オプションですが、上から特定の高さを取得できないためbr、空の div を使用する必要がありますが、これは使用しないでください
迅速な修正を提供する2つの提案：
箇条書き要素のマージントップまたは。
内部に改行なしのスペースがあるH2を追加します。例：
<h2> </h2>
CSS を使用せずに余分なスペースを追加したい場合は、<br/>
タグを使用できます。これは、煩雑で悪い習慣である空の div よりもはるかに優れています。
ただし、CSS は実際には最良の方法です。
h2 に幅を与えて、残りの行全体を占めるようにします。箇条書きリストは、左側の段落と同じ高さに自動的にドロップされます。
または、箇条書きリストに margin-top または padding-top を指定します。
margin-top2番目のdivまたはmargin-bottom最初のdivのいずれかに使用することをお勧めします。
例：非表示のdivの高さが100pxの場合は、次のように記述します。<div style="margin-bottom:100px">...</div>