幻想をぶち壊す　イマージンブレカー(margin相殺について)　ネタです笑

2255 ワード
StyleSheet margin HTML CSS マークアップ HTML テキストリンク

概要(工事中だけどもう出します更新していきます！)

物語を読み進めることでCSSのmargin相殺について触れてみよう

物語

俺の名前はジン触れると間を相殺する力を持つ14歳だ。
間の相殺→margin相殺(ブロックレベル要素が接するときmarginが打消しあうこと)

Pタグの例
<p>テスト</p>
<p>テスト</p>
簡単に言うと重なっているてこと

ブロックレベル要素　(要素の前後にmarginあり)縦並びに配置される

  • h1～h6・p・div・ul・lo・li・dl・dt・dd・table・from・hr・pre・brockquote　計14個　
ブロックレベル
<div>テスト</div><h1>テスト</h1>↓
テスト
テスト

インライン要素　(要素にmarginなし)横並びに配置される

  • a・span・label・input・textarea・select・img・b
インライン
<span>テスト</span><span>テスト</span>↓
テストテスト