[CSS]文字の長さだけinline-blockで装飾する

css-inline-block

CSSってなんて便利なの!CSSでボタンを作れば画像で作る手間が省けます。作業効率が格段に上がります。 要素にborderや、display:blockでボタンにする場合、一行まるごとCSSが適応されてしまいます。

そんな時は、display: inline-block; を追記すると、文字がある長さだけ装飾する事ができます。paddingで余白を整える事で簡単にボタンの様にする事ができます

a{
display: inline-block;
margin-left: 6px;
white-space: nowrap;
padding: 1px 4px;
border-radius: 3px;
text-decoration: none;
}

この記事は2015年11月に旧ブログに書いたものを引っ越しさせました。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください