ポコ・ア・ポコ パソコン教室は・・・ホームページを作ろう
ホームページを作るにはCSSを勉強しなければいけない。
解りやすく、CSSの具体例で説明します。
解りやすく、CSSの具体例で説明します。
余白（margin）の実験
余白（margin）の実験
余白上50右100下200左300
＜head＞
＜style type="text/css"＞
＜!--
.yohaku_margin {
margin: 50px 100px 200px 300px; /* 上=1px、右=2px、下=3px、左=4px */
border-style: solid;
border-color:firebrick;
}
--＞
＜/head＞
＜style type="text/css"＞
＜!--
.yohaku_margin {
margin: 50px 100px 200px 300px; /* 上=1px、右=2px、下=3px、左=4px */
border-style: solid;
border-color:firebrick;
}
--＞
＜/head＞
＜body＞
＜div align="" class="yohaku_margin"＞＜h2 class=""＞余白上50右100下200左300＜/h2＞＜/div＞
＜/body＞
＜div align="" class="yohaku_margin"＞＜h2 class=""＞余白上50右100下200左300＜/h2＞＜/div＞
＜/body＞
margin: 1px;・・・・・上下左右=1px
margin: 1px 2px;・・・・・上下=1px、左右=2px
margin: 1px 2px 3px;・・・・・上=1px、左右=2px、下=3px
margin: 1px 2px 3px 4px;・・・・・上=1px、右=2px、下=3px、左=4px
上下左右のマージンをそれぞれ個別に指定します。
margin-top:1px;・・・・・ top
margin-right:1px;・・・・・ right
margin-bottom:1px;・・・・・bottom
margin-left:1px;・・・・・ left
margin: 1px 2px;・・・・・上下=1px、左右=2px
margin: 1px 2px 3px;・・・・・上=1px、左右=2px、下=3px
margin: 1px 2px 3px 4px;・・・・・上=1px、右=2px、下=3px、左=4px
上下左右のマージンをそれぞれ個別に指定します。
margin-top:1px;・・・・・ top
margin-right:1px;・・・・・ right
margin-bottom:1px;・・・・・bottom
margin-left:1px;・・・・・ left
Copyright 20010 - 2020 ポコ・ア・ポコ株式会社