CSSのお勉強 Padding

css paddingHTML&CSSS

余白設定。Padding

文字周りの空きを調整してくれる機能だと思います。四方、個別に設定できるので、便利です。

四方にPadding:10px

左 Padding:10px

右 Padding:10px

上 Padding:10px

下  Padding:10px

四方に設定

こんな感じ

四方にPadding:10px

コードはこちら

<p style="font-weight:bold;color: gray;border-left:solid;margin:5px;padding:10px;width:400px;height:50px;background-color:#b9fff8;">四方にPadding:10px</p>

左のみ設定

左 Padding:10px

小見出しに使えますね。

コードはこちら

<p style="font-weight:bold;color:gray;border-left:solid;margin:5px;padding-left:10px;width:400px;height:50px;background-color:#b9fff8;">左 Padding:10px</p>

右のみ設定

右 Padding:10px

こんな感じ

<p style="font-weight:bold;color: gray;border-left:solid;margin:5px;padding-right:10px;width:400px;height:50px;background-color:#b9fff8;">右 Padding:10px</p>

コードはこちら

上のみ設定

上 Padding:10px

こんな感じ

<p style="font-weight:bold;color: gray;border-left:solid;margin:5px;padding-top:10px;width:400px;height:50px;background-color:#b9fff8;">上 Padding:10px</p>

コードはこちら

下のみ設定

こんな感じ

下  Padding:10px

コードはこちら

<p style="font-weight:bold;color: gray;border-left:solid;margin:5px;padding-bottom:10px;width:400px;height:50px;background-color:#b9fff8;">下  Padding:10px</p>
タイトルとURLをコピーしました