質問: 課題でホームページ作ってるんですけど、 場所 その場所の紹介文 上のやつを下にあと2つ作ります。 これでやると、場所と場所の紹介文との間に空白ができるちゃうんですけど本当は詰めたいです。やり方分かりませんか? ちなみに、場所のとこと紹介文の色を別のものにしたいです。
回答: p 要素を使うという制約があるならば、 ● CSS p.note {color: darkviolet; margin-bottom: 0; padding-bottom: 0;} p.note + p {margin-top: 0; padding-top: 0;} ※「+」は「結合子」のひとつで、「直後の」を意味します。 ● HTML 場所1 その場所の紹介文1 場所2 その場所の紹介文2 場所3 その場所の紹介文3 しかし、この場合は、p 要素よりも定義リスト要素(dl、dt、dd)を使った方が相応しいです。dd 要素は初期状態では左マージンを取って表示されるので、margin-left: 0 で左マージンを無くします。 ● CSS dl.places dt {margin-top: 1em; color: darkviolet;} .places dd {margin-left: 0;} 場所1 その場所の紹介文1 場所2 その場所の紹介文2 場所3 その場所の紹介文3