background-colorの上に囲み線を入力したい。

Question

HTML

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;" class="more">
    MORE blog >
</div>

css

margin-top:10px;
text-align:center;
background-color:#F2F2F2;
}
コード

background-colorの上に囲み線を入力してつなげて、background-colorを表示したい。
リンク内容のように完成図をしたいので教えてください。

Comments

[yambejp]

普通にご提示のcssを適用すればbackground-Colorは反映されますが
それ以外になにをしたいのでしょう？
「囲み線を入力して」が、例示いただいたサイトのどの部分のことかもよくわかりません

[newdeal41]

すみません、more blogのところをサイトのようにしたいのですが、よろしくおねがいします。

[yambejp]

私の見た感じサイトのようになっています
どこがなっていないと思うのかを具体的に示してください

[newdeal41]

backgrooundの効果が、more blogにかからずに、空間が開いてしまっている。
Ｌｍｉｎａ　blogのbackgroundの上にひょうじしたいのですが、どうしたらよろしいですか？

[yambejp]

いったん解答欄にCSS載せておきました。
これをベースに何が違うか指摘ください。
画面をキャプチャするとか、手書きで説明図を書いて
「ここがこう違う」的な書き方をしてもらわないとCSSの説明は伝わらないと思います

[newdeal41]

more blogと商品一覧の間に空間が開いてしまっているようです。
つなげてひょうじしたいのですが、できますでしょうか？

[yambejp]

> 商品一覧

とはなんでしょう？命題には記載がないようですが

[newdeal41]

background-colorの上に囲み線を表示したいです。どうしたらよろしいですか？

Answer 1

<style>
.more{
margin-top:10px;
text-align:center;
background-color:yellow;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #333333;
}
</style>
<div class="more">
    MORE blog >
</div>

Comments

[yambejp]

背景色がみづらいので仮に黄色にしておきました
とくに空間とかみあたりません。