ブロック要素の横幅を内容に合わせる / カワズの唄

スポンサーサイト

            
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブロック要素の横幅を内容に合わせる

            
「記事の中で見出しに枠線をつけたい」
と妻から申し出が。

そりゃ簡単な話だとCSSを書いてあげました。

しかしご存知の通り、ブロック要素の高さ(height)は内容に合わせて変化するのですが、幅(width)はいちいち指定しないといけません。

めんどくさい・・・
どないかならないものか・・・?

なりますよ。
それが↓このコードです。

<span style=" border:solid 5px #8DC20E; padding:10px; border-radius:10px;
display:inline-block; margin-bottom:20px ">内容量にあわせる</span>

『display:inline-block;』がポイントです。ブロックではなくインラインブロックにすれば、要素の幅を内容に合わせることが出来るのですね。


内容量
内容量にあわせる
内容量によって幅が可変する
内容

ちょっとした便利技でした。
関連記事
スポンサーサイト

コメント

[コメント記入欄はこちら]

2 ■これをdivタグに適用した場合

margin: 0 auto;
が効かなくて、センタリングできないのですが、何か良い方法はありますでしょうか?

コメントの投稿

非公開コメント

FC2Ad

カークランド

Back to Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。