Padding,Margin,Center

余白とセンター揃え

paddingとmargin

余白


余白とボーダーのCSS

css

センターにそろえる

テキストや画像は「text-align: center」を指定してセンター揃えにします。
ブロック要素は「margin:0 auto」を指定します。

このテキストはCSSで「text-align: center」を指定しています

pink-01

CSSで「margin:0 auto」でボックスをセンター揃え
テキストも「text-align: center」でセンター揃え

HTML
<div class="pink-01">テキスト</div>

CSS
.pink-01 {
margin:0 auto;
padding: 20px 20px 10px;
background: #ffb6c1;
border-radius: 10px;
margin-bottom: 30px;
text-align: center;
}


pink-02
CSSで「margin:0 auto」でボックスをセンター揃え
横幅を「width:600px」

HTML
<div class="pink-02">テキスト</div>

CSS
.pink-02 {
margin:0 auto;
padding: 20px 20px 10px;
background: #ffb6c1;
border-radius: 10px;
margin-bottom: 30px;
max-width:600px;
}


pink-03
「box-shadow」で影をつける

HTML
<div class="pink-03">テキスト</div>

CSS
.pink-03 {
margin:0 auto;
padding: 20px 20px 10px;
background: #ffb6c1;
border-radius: 10px;
margin-bottom: 30px;
max-width:600px;
box-shadow: 3px 3px 5px gray;
}