display:block;を指定した置換要素の幅

質問

通常のブロック要素であれば親要素の幅まで広がりますが、
置換要素の場合display:block;を指定しても幅が広がりませんよね。
置換要素をブロック要素と同様な幅算出させる方法ってありますか？

具体的にはiPhone/Android向けのデザインでbuttonを親要素の横幅いっぱいにしたいのですが、
width:100%;だとbuttonにmarginを設定した場合にはみ出てしまうので使い勝手がよくないのです。

Firefoxの場合はwidth:-moz-available;を指定することで期待する挙動になるのですが、
webkitで似たようなことを実現する方法があれば教えてください！

回答No.5

ORUKA1951

＞buttonが直接marginを持っていた方が都合がよいのでそういった方法があるか、という質問です。
　あくまで、form要素内のbuttinですが、本来インライン要素なのでdisplay:blockに指定した時点でblockとしてのサイズになりますから、その親のコンテナブロックとの関係でサイズが決定されますからむりでしょう。

＞さまざまな理解度の人間が編集に関わりますので、このような前提条件がありません。

　これは、さすがに想定外です。私も担当部署で編集を許可していることがありますが、その場合は、「サイト全体のデザインを統一しないと利用者が混乱する」という名目で、詳細なテンプレートやマニュアルを渡し、かつ講習を受けてもらいます。それが出来ない場合は、SSPで処理するデータ形式や、XMLにしてもらっています。

[XML]
<文書>
　<title></title>
　<著者>
　　<部署>
　　　<部></部>
　　　<課></課>
　　　<係></係>
　　</部署>
　　<名前>
　　　<氏></氏><名></名>
　　</名前>
　</著者>
　<記事>
・・・とか。

＞複数人で制作するので共通のデザインとして
　^^^^^^^^^^^^^^^　　　^^^^^^^^^^^^
　の場合は、最低限、共通の文書構造に従ったHTMLを作成してもらうと言うことが絶対に必要になります。それをなくして、共通のデザインというのは無理です。それについては、クライアントに理解してもらうしかありません。もちろん、こちから一方的に決めるものではなく、あくまで要望と限界の相談になります。
　そうしておくと、将来、担当者や業者が変わっても継続的にメンテナンス可能になります。

お礼

ありがとうございます。
私もある程度調べたので、現状では無理そうだという結論に達しています。
時間を割いておつきあいいただきありがとうございます。

常に共通の文書構造に従ったHTMLが作成できるのは理想的ですね。
こちらは大きめのメディアを運営しているインハウスなのでなかなか厳しそうです。
多くのサイトが未だにHTML構造的におかしいところを見ても、ほとんどのところではなかなか理想的に行かず苦労しているのだと思います。
この辺の課題は質問の内容とは関係ありませんので終了とさせていただきます。
ありがとうございました。

回答No.4

ORUKA1951

＞そういった作業や不要なhtmlや複雑なcssを生み出したくないということです。

　示されたHTMLから、HTMLで作成されていると推測されます。HTML5の最大の変更点(と私が思っているの)は、文書構造を適切にマークアップすることです。以前のHTMLにあったプレゼンテーションに関わる要素・属性がすべて削除されています。
★新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )

　これは、
・「全く余白がないと各自で余白を空けたくなり」
・「<br>を足してみたり」
・「デザイナーであれば新たにclassを付けてmarginを付けたり」することはなくなるということですね。

　そのため、HTML5ではHTMLが極めてシンプルになり、文書構造を示すために必要だったdivやspan、あるいはclass名が劇的に減少します。

　そのため「各自がmarginをつけるというデザインのために余計なタグや、余計なCSSを書かなくて済」みます。
　そのかわり、文書構造には厳密性が求められますから、「blockで囲む」以前に、囲まれているはずです。

「置換要素の場合display:block;を指定しても幅が広がりませんよね。」
display:blockを指定した時点で、width:autoに、また継承しないですから
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
'width'
　Value: <length> | <percentage> | auto | inherit
　Initial: auto
　・・・【中略】・・・
　Inherited: no
　・・・【中略】・・・
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［10.2 Content width: the 'width' property( http://www.w3.org/TR/CSS2/visudet.html#propdef-width )］より

　巾はwidth,margin,paddingで指定できます。

　そんなに悩まなくても良いと思うのですが・・

補足

おっしゃりたい意図がよく分からないのですが、

＞文書構造を適切にマークアップする
まず、さまざまな理解度の人間が編集に関わりますので、このような前提条件がありません。全く出来ないというわけではりませんが、場合によっては構造が正しくないこともあるかもしれません。

また、共通デザインとして用意しているbuttonにはmarginを設定していません。ですので利用者は「余白を空ける」という余計な作業が生まれます。

ですので、下記のようなこともありません。
＞そのため「各自がmarginをつけるというデザインのために余計なタグや、余計なCSSを書かなくて済」みます。

ですがbuttonに直接marginを設定せずとも余白は作れますので、それほど大きな問題ではありませんが、buttonが直接marginを持っていた方が都合がよいのでそういった方法があるか、という質問です。

回答No.3

ORUKA1951

＞複数人で制作するので共通のデザインとしてbuttonにmarginを持たせたかったというのが今回の実現したい内容です。

＞エンジニア等cssを修正しない人がhtmlを編集したり、cssの理解度も様々な人が制作に携わるので、aやinput、buttonでも同様な挙動で、marginも設定された共通の環境を提供したかったという作業効率の問題です。

　なら、逆に簡単なのではないですか？下手に知っていて弄くられると難しくなますが・・(^^)

★こういう場合、もっとも大事なことはHTMLとCSSの基本だけです。すなわち、デザインのためにHTMLを書かない。HTMLは文書構造を記述することに徹底するということです。
　「共通のデザインとしてbutton」というふうに、デザインにひこずられるとHTMLもスタイルシートも複雑化して手が付けられなくなります。

補足

現状デフォルトでmarginが付いてないので、各自がmarginをつけるというデザインのために余計なタグや、余計なCSSを書かなくて済むように、シンプルにしたいという目的の質問です。
全く余白がないと各自で余白を空けたくなりますよね？
エンジニアであれば<br>を足してみたり、デザイナーであれば新たにclassを付けてmarginを付けたりと複雑化するかもしれません。
そういった作業や不要なhtmlや複雑なcssを生み出したくないということです。

回答No.2

ORUKA1951

＞見出し等、他の要素が横幅いっぱいに使ったりしますので、paddingで調整したく
＞ありません。回避策としては間に別のブロック要素をはさんでその要素に対して
＞marginまたはpaddingを持たせるしかないのですが、

　とは言っても、文法的におかしいので「別のブロック要素」で囲むしかないのでは?、否が応でもブロックは生成されますので。
　また、HTML5では文法上は<button>要素に親要素の制約はありませんが、<form>内に置かれたときはレンダリングが異なります。拝見したHTMLで見る限りは、button要素を使う必要はないのではないかと・・。スタイルシートで何でもできるのでわざわざ<button>を使う必要はないのではないかと思いますが？

[文書解析木]
section　　　　　　 id="test"
　|- h1
　|- p
　|- 匿名ブロック補完
　|　　|- a 　　　　　　　　　　class="test1
　|　　|- a 　　　　　　　　　　class="test2"
　|- p
　|- 匿名ブロック補完
　|　　|- button　　　　　　　　class="test1"
　|　　|- button　　　　　　　　class="test2"

<section id="test">
＿<h1>見出し</h1>
＿<p>非置換要素</p>
＿<a href="#" class="test1">[A] test 1</a>
＿<a href="#" class="test2">[B] test 2</a>
＿<p>置換要素</p>
＿<form action="">
＿＿<p><button type="button" class="test1">[C] test 1</button></p>
＿＿<p><button type="button" class="test2">[D] test 2</button></p>
＿</form>
＿<form action="">
＿＿<p><button type="button" class="test1">[C] test 1</button></p>
＿＿<p><button type="button" class="test2">[D] test 2</button></p>
＿</form>
</section>

body {margin: 0; padding: 0;}
#test h1 {background-color: red;}
#test a.test1 {display: block; margin: 20px; background-color: lime;}
#test a.test2 {display: block; margin: 20px; background-color: pink; width: 100%;}
#test form p{padding:0;margin:20px;}
#test form p button{padding:-1px;width:100%;background-color: lime;}
#test form+form p{padding:1px;margin:20px;}
#test form+form p button{width:100%;background-color: pink;}

お礼

回答ありがとうございます。
サンプルは不具合が再現する例として書いたもので、実際には当然ブロック要素で囲んだり様々な要素が発生します。
今のところ別のブロック要素にmarginを持たせることで同様のデザインは表現できるのですが、複数人で制作するので共通のデザインとしてbuttonにmarginを持たせたかったというのが今回の実現したい内容です。
エンジニア等cssを修正しない人がhtmlを編集したり、cssの理解度も様々な人が制作に携わるので、aやinput、buttonでも同様な挙動で、marginも設定された共通の環境を提供したかったという作業効率の問題です。
どなたか御存知であればと思いこちらに書かせていただきましたが、私自身いくつか試して断念したので解決できないのはしょうがないと思っています。
おつきあいいただきありがとうございました。

回答No.1

ORUKA1951

いいえ、きちんと表示されるはずです。
width:100%であっても、margin/paddingが指定してあると、その内側のサイズが算出値になるのですから、正しい挙動です。
・8.1 Box dimensions ( http://www.w3.org/TR/CSS2/box.html#box-dimensions )
・Since child elements (generally) inherit the computed values of their parent, ( http://www.w3.org/TR/CSS2/syndata.html#percentage-units )
　親要素の算出値を継承する。

　どういうマークアップに対して、どのようなデザインしたいかの愚多的な内容がわからないのですが、あらかじめ算出基準になる親要素のpaddingで調整しておくとか・・

補足

回答ありがとうございます。

ご説明の通り、親要素の算出値を継承しますので、包含ブロック（Containing blocks）に対してmargin/paddingを指定しても、その内側のサイズを算出値としますが、やりたい事としては要素自身にmarginを使いたいのです。
こちらの説明不足でしたので、下記にサンプルHTMLを記載します。

<style>
body {margin: 0; padding: 0;}
#test h1 {background-color: red;}
#test .test1 {display: block; margin: 20px; background-color: lime;}
#test .test2 {display: block; margin: 20px; background-color: pink; width: 100%;}
</style>

<section id="test">
<h1>見出し</h1>
<p>非置換要素</p>
<a href="#" class="test1">[A] test 1</a>
<a href="#" class="test2">[B] test 2</a>
<p>置換要素</p>
<button type="button" class="test1">[C] test 1</button>
<button type="button" class="test2">[D] test 2</button>
</section>

こちらの例で期待する挙動は[A]になります。
見出し等、他の要素が横幅いっぱいに使ったりしますので、paddingで調整したくありません。回避策としては間に別のブロック要素をはさんでその要素に対してmarginまたはpaddingを持たせるしかないのですが、そうしなくてすむ方法がありますか、という質問です。