width、marginの同時使用

質問

タイトル通りなのですが、
ボックスの大きさを例えば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

ratoa · ベストアンサー

まずは細かい事ですが、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の有名なバグがあるので気をつけてください。

参考URL：

http://adp.daa.jp/archives/000265.html

回答No.1

noname#39970

ボックス外側の余白は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>