IE、Operaではbutton要素の中身にも`text-indent`が効く

投稿: 2009年8月25日
最終更新: 2012年9月16日

日本語の文章を書くとき、段落の最初の行は1文字空けることが多いですが、そのようなときなどにCSSの text-indent がよく使われます。

字下げだけでなく、たとえば次のように見出しの前に記号を付けて目立たせるといったことが可能です。

h2:before {
  content: "●";
}
h2 {
  text-indent: -1em;
  margin-left: 1em;
}

さて、本題。 text-indent を指定したブロック要素の中にbutton要素を書くとどうなるでしょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>IE、Operaではbutton要素の中身にもtext-indentが効く</title>
<style type="text/css">
p {
  text-indent: 10em;
}
</style>
</head>
<body>
<p><button>button要素</button></p>
</body>
</html>