display-types-01-ref.html (2493B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 div { border:1px solid green; margin:5px; } 6 </style> 7 </head> 8 <body> 9 <table width="100%"><tr><td valign="top"> 10 <div><span style="display:block">1<img src="square-outline-32x32.png">"Before block</span 11 >Inner<span style="display:block">2<img src="square-outline-32x32.png">After block"</span 12 ></div> 13 <div><span style="display:inline">1<img src="square-outline-32x32.png">"Before inline</span 14 >Inner<span style="display:inline">2<img src="square-outline-32x32.png">After inline"</span 15 ></div> 16 <div><span style="display:inline-block">1<img src="square-outline-32x32.png">"Before inline-block</span 17 >Inner<span style="display:inline-block">2<img src="square-outline-32x32.png">After inline-block"</span 18 ></div> 19 <div><span style="display:table">1<img src="square-outline-32x32.png">"Before table</span 20 >Inner<span style="display:table">2<img src="square-outline-32x32.png">After table"</span 21 ></div> 22 <div><span style="display:inline-table">1<img src="square-outline-32x32.png">"Before inline-table</span 23 >Inner<span style="display:inline-table">2<img src="square-outline-32x32.png">After inline-table"</span 24 ></div> 25 <div><span style="display:table-row-group">1<img src="square-outline-32x32.png">"Before table-row-group</span 26 >Inner<span style="display:table-row-group">2<img src="square-outline-32x32.png">After table-row-group"</span 27 ></div> 28 </td><td valign="top"> 29 <div><span style="display:table-row">1<img src="square-outline-32x32.png">"Before table-row</span 30 >Inner<span style="display:table-row">2<img src="square-outline-32x32.png">After table-row"</span 31 ></div> 32 <div><span style="display:table-cell">1<img src="square-outline-32x32.png">"Before table-cell</span 33 >Inner<span style="display:table-cell">2<img src="square-outline-32x32.png">After table-cell"</span 34 ></div> 35 <div><span style="display:table-caption">1<img src="square-outline-32x32.png">"Before table-caption</span 36 >Inner<span style="display:table-caption">2<img src="square-outline-32x32.png">After table-caption"</span 37 ></div> 38 <div><span style="display:-moz-box">1<img src="square-outline-32x32.png">"Before flexbox</span 39 >Inner<span style="display:-moz-box">2<img src="square-outline-32x32.png">After flexbox"</span 40 ></div> 41 <div><span style="display:-moz-inline-box">1<img src="square-outline-32x32.png">"Before inline-flexbox</span 42 >Inner<span style="display:-moz-inline-box">2<img src="square-outline-32x32.png">After inline-flexbox"</span 43 ></div> 44 </body> 45 </html>