- ベストアンサー
CSSで複数のBOX間の境目は消える？（初心者向け）
- CSSを使用して作成した複数のボックス間の境目を消す方法について教えてください。隣接するボックスの間に少しスペースがありますが、それを取り除きたいです。
- ソースコードを確認しましたが、うさぎ、猿、うんこという3つのボックスが縦に並べられており、隣接するボックス間に細かいスペースが生まれています。このスペースを解消する方法を教えてください。
- CSSを使用して作成した複数のボックス間に隙間がある場合、border-widthやpaddingを調整することでスペースを取り除くことができます。具体的なソースコードの修正方法をお教えします。
- goodsavage
- お礼率69% (27/39)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
テーブルのセルでもってボックスを形成するより divを使ってコンテナ化することによって解消されますよ。 <head> <style type="text/css"> <!-- .param1 { border:solid 0px; background-color:#ffcccc; width:210px; height:60px; } .param2 { border-style:solid; border-width:10px 0px 10px 20px; background-color:#ffcccc; border-top-color:#666699; border-bottom-color:#666699; border-left-color:#666699; width:210px; height:60px;} --> </style> </head> <body marginwidth="0" marginheight="0" leftmargin="0" bgcolor=#999999> <div class="param1">うさぎ</div> <div class="param2">猿</div> <div class="param2">ウンコ</div> </body> もしテーブルを使わざるをえない場合は補足してください。 余計なお世話かもしれませんが、pxなどの単位などを省略 するとブラウザによっては正しく表示されない場合があるので きちんと書いた方がよいです。
その他の回答 (1)
- steelgreen
- ベストアンサー率50% (50/100)
いま、気づいたのですがtableタグが重複していますよね？ 一つ目には cellspacing="0" cellpadding="0" が記述されているのに対し二つ目には記述されていません。 つまり、二つ目のtableタグに cellspacing="0" cellpadding="0" 付け加えてやれば隙間はなくなります。 tebleタグでもってレイアウトする時、最初にわざと border="1" と書いてやると編集しやすくなりますよ。んじゃ！
お礼
まさにその通りでした！ あっという間でした。 有難うございました！ 本当、助かりました
お礼
もの凄い丁寧でスピーディーな対応有難うございます！ ちょっとＤＩＶとかもう一度調べてみます。 大変助かりました。