paddingとmarginをよく間違える
必ずどっちだっけ？と混乱してくる。いい加減覚えろ。
padding：要素の内側の余白
margin：要素の外側の余白
{margin: 20px 10px 5px 0px} 上、右、下、左のmarginの値
{margin: 20px 5px } 上下、左右のmarginの値
{margin: 20px 5px 10px} 上、左右、下のmarginの値
ただ、margin-top,margin-bottomと分けて表記した方があとで気が変わった時に修正しやすいよ。
罫線はそのままでテキストの周りだけに余白をつけるならpadding。
<h1 class="type-Sp01">
NO IMG OF LATEST
</h1>
<style type="text/css">
<!--
h1.type-Sp01 {
font-family:'Montserrat', sans-serif;
font-size:110%;
font-weight:600;
letter-spacing:-1px;
line-height:0.8em;
padding: 1.5em 0.5em;/*内側の余白*/
margin: 2.5em 0;/*外側の余白*/
background:;
border-top: dashed 1px #292F33;/*点線*/
border-bottom: dashed 1px #292F33;/*点線*/
}
-->
</style>NO IMG OF LATEST
上下の余白をもっと広げてやる。
<h1 class="type-Sp02">
NO IMG OF LATEST
</h1>
<style type="text/css">
<!--
h1.type-Sp02 {
font-family:'Montserrat', sans-serif;
font-size:110%;
font-weight:600;
letter-spacing:-1px;
line-height:0.8em;
padding: 3.5em 0.5em;/*内側の余白*/
margin: 2.5em 0;/*外側の余白*/
background:;
border-top: dashed 1px #292F33;/*点線*/
border-bottom: dashed 1px #292F33;/*点線*/
}
-->
</style>NO IMG OF LATEST
marginは外側の余白だ。
<h1 class="type-Sp03">
NO IMG OF LATEST
</h1>
<style type="text/css">
<!--
h1.type-Sp03 {
font-family:'Montserrat', sans-serif;
font-size:110%;
font-weight:600;
letter-spacing:-1px;
line-height:0.8em;
padding: 1.5em 0.5em;/*内側の余白*/
margin: 4.5em 4.5em;/*外側の余白*/
background:;
border-top: dashed 1px #292F33;/*点線*/
border-bottom: dashed 1px #292F33;/*点線*/
}
-->
</style>NO IMG OF LATEST
NOTICES
- 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。