| <!DOCTYPE html> |
| <!-- |
| | Vertical margins will not have any effect on non-replaced inline elements. |
| | https://www.w3.org/TR/CSS21/box.html#margin-properties |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| color: #fff; |
| font-family: Roboto; |
| font-size: 50px; |
| font-weight: bold; |
| } |
| .container { |
| background-color: #e1f5fe; |
| display: inline-block; |
| vertical-align: top; |
| width: 160px; |
| } |
| .non-replaced-inline { |
| background-color: #03a9f4; |
| margin: 10px; |
| } |
| .inline-block { |
| background-color: #3f51b5; |
| display: inline-block; |
| margin: 10px; |
| } |
| .replaced-inline { |
| background-color: #673ab7; |
| height: 50px; |
| margin: 10px; |
| width: 50px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <span class="non-replaced-inline">1</span> |
| <span class="non-replaced-inline">2</span> |
| <span class="non-replaced-inline">3</span> |
| <span class="non-replaced-inline">4</span> |
| </div> |
| <div class="container"> |
| <span class="inline-block">1</span> |
| <span class="inline-block">2</span> |
| <span class="inline-block">3</span> |
| <span class="inline-block">4</span> |
| </div> |
| <div class="container"> |
| <video class="replaced-inline"></video> |
| <video class="replaced-inline"></video> |
| <video class="replaced-inline"></video> |
| <video class="replaced-inline"></video> |
| </div> |
| </body> |
| </html> |
