• ベストアンサー
  • すぐに回答を!

width、marginの同時使用

  • 質問No.2716286
  • 閲覧数188
  • ありがとう数0
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 29% (48/163)

タイトル通りなのですが、
ボックスの大きさを例えば700pxとして、更にそのボックスの余白を
マージンで指定する、と言う事は出来ないのでしょうか?
自分で作ってみたのは良いのですが、
.sample1の方の効果が出ません。divの所は効果があるのですが…
ちなみに外部ファイル呼び出しの方法で設定しました。

作ってみたもの↓
div{background-colo:#ffffff;
width:700px;
text-align:left;
font-color:#282828;
font-size:14px;}
.1sample{ margin: 10px;
padding: 20px;}

何か気付いた事があればご回答お願いします。

質問者が選んだベストアンサー

  • 回答No.2
  • ベストアンサー

ベストアンサー率 40% (28/69)

まずは細かい事ですが、background-colorの最後のrが抜けてます。
テキストの色を変えるのはfont-colorではなくcolorです。
class名は数字から始めないように。
× .1sample
○ .sample1

htmlの方がどんな記述されてるか分からないと正しい解答は出来ませんが、widthとmarginを同時に指定したいなら分けて指定する必要はないです。

【html】
<div class="sample1">
内容
</div>

【css】
div.sample1{
width:700px;
margin:10px;
border:1px solid #f00;
}

最後のborderは、境界が分かるように入れてるだけですので実際は不要です。
ちなみにwidthとpaddingやborderを併用する際には、IEの有名なバグがあるので気をつけてください。

その他の回答 (全1件)

  • 回答No.1
ボックス外側の余白はmargin
ボックス内側の余白はpadding


<div style="width:800px;margin:auto;padding:0;background:#faa">
sample<br>
<div style="width:700px;margin:20px;padding:10px;background:#ffa">
ここに長めの文章を書いてみてboxと文字と上位の囲みの距離を確認する。<br>
marginが20pxなので左右上下に20pxの赤い余白が有る筈。<br>
但し、センタリングしていないので右側は20px以上の赤い空白がある可能性があるが上位のbox内に700pxで収まっている筈だ。<br>
paddingは10pxなので黄色いbox内は文字の外周に10pxの空白が有る筈。<br>
</div>
しかしこの階層のdivのpaddingは0であるために赤いboxギリギリに文字が始まっている筈。
</div>
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ