anonymous-button-content-box-ref.html (1134B)
1 <!doctype html> 2 <title>Reference for Anonymous button content box</title> 3 <style> 4 body { margin: 0 } 5 .button { width: 124px; height: 124px; background: papayawhip; border: 2px solid; display: table-cell; vertical-align: middle; text-align: center; box-sizing: border-box; } 6 .top { vertical-align: top } 7 .left { text-align: left } 8 .float { display: block; float: left; } 9 body > div { clear: left; } 10 .button > div { width: 50px; height: 50px; border: solid } 11 .button > .tall { height: 150px } 12 .button > .wide { width: 150px; margin-top: 32px } 13 </style> 14 <div> 15 <div class=button>input</div> 16 <div class="button">input grid</div> 17 <div class="button">input flex</div> 18 <div class=button>button</div> 19 </div> 20 <div> 21 <div class=button style="text-align: left">button left</div> 22 <div class=button><div>div</div></div> 23 <div class="button top">grid</div> 24 <div class="button top"><div>grid</div></div> 25 </div> 26 <div> 27 <div class="button top left float">flex</div> 28 <div class="button top float"><div>flex</div></div> 29 <div class="button float"><div class=tall>tall</div></div> 30 <div class="button float"><div class=wide>wide</div></div> 31 </div>