少し間隔をあけてくだされ・・・狭いんじゃ
ブロック要素に対して、内外の幅を指定するのです。
今回のCSS
- ・要素の外側の幅を指定する
- ・要素の内側の幅を指定する
要素の外側の幅を指定する。
.testClass { margin-top:XXpx; margin-bottom:XXpx; margin-right:XXpx; margin-left:XXpx; margin:上下左右px; margin:上下px 左右px; margin:上px 左右px 下px; margin:上px 右px 下px 左px; }
要素の外側、他要素との間隔の指定でした。
横並びの画像リストの時とか、margin-rightとか(leftでもよいです)で指定してやると綺麗に間隔があいたりします。
要素の中の間隔を指定しよう
marginは要素の外側の間隔でしたが、次は要素の内側の間隔の指定になります。
.testClass { padding-top:XXpx; padding-bottom:XXpx; padding-right:XXpx; padding-left:XXpx; padding:上下左右px; padding:上下px 左右px; padding:上px 左右px 下px; padding:上px 右px 下px 左px; }
これは要素の内側の指定でした。
隣接する要素との間隔は変わりませんが、自要素が膨れ上がる感覚でOKかと思います。
以下、paddingがどれだけ素晴らしいのかが分かるテーブル
成分名 | 効果 | 特記事項 |
---|---|---|
メホホブルササンG | やせ薬 | 肉じゃがと野村義男 |
成分名 | 効果 | 特記事項 |
---|---|---|
メホホブルササンG | やせ薬 | 肉じゃがと野村義男 |
練習問題的な
2つのdivを作り
最初のdivは、【左20px 上20px 下10pxのmargin】を指定し、【上左に5pxのpadding】を指定してください。
また、適当なテキストを最初のdiv内に記述し、【フォントサイズを13px】【文字色を赤(赤っぽければ何でもOK)】としてください。
id指定でCSSを組んでみてください。ID名は問いません。
次のdivには左50pxのmarginを指定し、上下左右10pxのpaddingを指定してください。
また、適当なテキストを次のdiv内に記述し、【div背景色を黒】【文字色を白】としてください。
class指定でCSSを組んでみてください。class名は問いません。
【上記できた人用の追加】
もっと2割 の文言を追加記述し、2部分を上付き文字としてください。
一文字分インデント幅を開けて、文字間隔を2.5文字開けてください。
記述divはどちらでもかまいません