| <!DOCTYPE html> |
| <!-- |
| | A sequence of collapsible spaces at the beginning of a line is removed. |
| | A sequence of collapsible spaces at the end of a line is removed. |
| | https://www.w3.org/TR/css3-text/#white-space-phase-2 |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| font-size: 50px; |
| font-weight: bold; |
| } |
| .inline-block { |
| background-color: #b3e5fc; |
| display: inline-block; |
| } |
| .invisible { |
| background-color: #f44336; |
| /* TODO: Use "border: 1px solid #4caf50;" in addition to. */ |
| } |
| .visible { |
| background-color: #4caf50; |
| padding: 0 10px; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <div class="inline-block"> Hello, world! </div> |
| </div> |
| <div> |
| <div class="inline-block"><span class="visible"></span><span class="invisible"> </span> Hello, world!</div> |
| </div> |
| <div> |
| <div class="inline-block"><span class="visible"> </span><span class="invisible"> </span> Hello, world!</div> |
| </div> |
| <div> |
| <div class="inline-block">Hello, world!<span class="invisible"> </span><span class="visible"></span></div> |
| </div> |
| <div> |
| <div class="inline-block">Hello, world!<span class="invisible"> </span><span class="visible"> </span></div> |
| </div> |
| </body> |
| </html> |