| <!DOCTYPE html> |
| <!-- |
| | Specification does not define whether collapsed elements should reduce |
| | the available width of a line box (and thus affect the line breaking) or not, |
| | so Chrome, Firefox, IE, and Opera are treating them differently. |
| | Cobalt takes collapsed elements into account as long as they have margins, |
| | borders, or paddings. The resulting rendering is arguably the best among |
| | the aforementioned browsers (Firefox comes close) but is different from |
| | Chrome which normally would be a bad thing if not the fact that Chrome's |
| | rendering looks plain wrong. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| font-size: 20px; |
| font-weight: bold; |
| } |
| .group { |
| display: inline-block; |
| margin-right: 50px |
| } |
| .containing-block { |
| background-color: #03a9f4; |
| margin-bottom: 10px; |
| width: 70px; |
| } |
| .with-padding { |
| background-color: #2196f3; |
| padding-left: 60px; |
| } |
| .with-large-padding { |
| background-color: #2196f3; |
| padding-left: 120px; |
| } |
| .inline-block { |
| background-color: #009688; |
| display: inline-block; |
| height: 30px; |
| width: 30px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="group"> |
| <div class="containing-block"> |
| <span>The Hegemony Consul</span> |
| </div> |
| </div> |
| <div class="group"> |
| <div class="containing-block"> |
| <span class="with-padding"></span> |
| <span>sat on the balcony</span> |
| </div> |
| <div class="containing-block"> |
| <span>sat</span> |
| <span class="with-padding"></span> |
| <span>on the balcony</span> |
| </div> |
| </div> |
| <div class="group"> |
| <div class="containing-block"> |
| <span class="with-large-padding"></span> |
| <span>of his ebony spaceship</span> |
| </div> |
| <div class="containing-block"> |
| <span>of his ebony spaceship</span> |
| <span class="with-large-padding"></span> |
| </div> |
| </div> |
| <div class="group"> |
| <div class="containing-block"> |
| <span class="with-padding"></span> |
| <span>and</span> |
| </div> |
| <div class="containing-block"> |
| <span>and</span> |
| <span class="with-padding"></span> |
| </div> |
| </div> |
| <div class="group"> |
| <div class="containing-block"> |
| <span class="with-padding"></span> |
| <div class="inline-block"></div> |
| </div> |
| <div class="containing-block"> |
| <div class="inline-block"></div> |
| <span class="with-padding"></span> |
| </div> |
| </div> |
| </body> |
| </html> |