文字幅に合わせた囲み枠の作り方♡

囲み枠の幅を小さくしたい

枠の中の余白を消して見やすくしたい

そんな時は

display:inline-block; 

で解決できます♡

▼横幅いっぱいに枠がある状態▼

<div style="background:#fff; padding:10px; border:1px solid #F4B0BA;">
<div style="margin:0;"><span style="background-color: rgb(255, 255, 255);">★★</span></div></div>
 

★★

display:inline-block; を追加すると

▼文字数に応じて横幅調節▼

<div style="display:inline-block; background:#fff; padding:10px; border:1px solid #F4B0BA;">
<div style="margin:0;"><span style="background-color: rgb(255, 255, 255);">★★</span></div></div>
 

★★

<div style="の後ろに追加します♡

divではない場合もありますが

枠のHTML文頭

<〇〇 style="の後ろに

display:inline-block;

を、追加すればいいだけ♡

コピペで使える

自動調節の囲み枠

いろんなバージョンでそろえているので

使ってみてください♡

『【文字数に合わせた囲み枠】四角形囲み枠１０選』

ブログを魅力的に魅せるお役立ち記事

【改行で線が増えない♡】四角形囲み枠１０選

大人可愛いお申込みボタン１２種♡

簡単♡スマホヘッダーの設置方法

ヘッダー設置方法♡

ハッシュタグを透明化♡

おすすめ囲み枠・お申込みボタン・マーカーライン

LINE公式メニューを設置する方法♡

写真が見切れてる!?原因と対処法

継続サポート▶サポート詳細
canva使い方講座▶講座申し込み
デザイン作成▶MENU内容・料金
インスタお茶会▶詳細はこちら

お客様ご感想▶お客様の声

人気記事♡

　・起業初期、半年前の収入は・・・？
　・お役立ち記事を書くときは〇〇で!!
　・もう、あざとい裏工作やめません？
　・【改行で線が増えない♡】四角形囲み枠１０選

♡この記事を書いたはやみずしょうこのプロフィール→こちら♡