| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <!-- |
| | When an inline box is split, margins, borders, and padding have no visual |
| | effect where the split occurs (or at any split, when there are several). |
| | https://www.w3.org/TR/CSS21/visuren.html#inline-formatting |
| --> |
| <html> |
| <head> |
| <style> |
| .containing-block { |
| width: 15rem; |
| display: inline-block; |
| } |
| .text-block { |
| color: white; |
| background-color: blue; |
| margin-left: 0.5rem; |
| font-family: Roboto; |
| font-size: 16px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="containing-block"> |
| <span class="text-block"> BADGE </span> <span class="text-block"> FOO BAR BAZ, 11:00 AM - 7:00 PM </span> |
| </div> |
| </body> |
| </html> |
