囲み枠の余白を変える方法

囲み枠に文章を入れてみると

左右の余白が狭すぎた・広すぎた

ということはありませんか？

 

たとえば

 

シンプルな黒の枠線です。

文字数に合わせてサイズが変わります。

 

<div style="display:inline-block; border: 4px double #000000; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

↑この15pxのサイズを変更することで

囲み枠の中の余白が変わります。

 

 

20pxにしてみると…

 

シンプルな黒の枠線です。

文字数に合わせてサイズが変わります。

余白20pxです。

 

<div style="display:inline-block; border: 4px double #000000; padding: 20px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

5pxにしてみると…

 

シンプルな黒の枠線です。

文字数に合わせてサイズが変わります。

余白5pxです。

 

<div style="display:inline-block; border: 4px double #000000; padding: 5px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

プレビューで

PC・スマートフォン両方の表示をチェックして

お好みの余白を楽しんでくださいね＾＾

 

 

 

 

 

 

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています！

「マーカー」とメッセージを送ってねドキドキ

友だち追加

ID検索は @570smkow