Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Inlined

HTML

<h1>Inlined</h1>

<div>

<p>Normal Paragraph</p>

<table><tr><td>Normal Table</td><td>r1c2</td><td>r1c3</td></tr>

<tr><td>row2</td><td>r2c2</td><td>r2c3</td></tr></table>

<ul><li>Normal List</li><li>Normal List</li></ul></div>

<div>

<p class="inlined">Inlined Paragraph</p>

<table class="inlined">

<tr><td>Inlined Table</td><td>r1c2</td><td>r1c3</td></tr>

<tr><td>row2</td><td>r2c2</td><td>r2c3</td></tr></table>

<ul class="inlined"><li class="inlined">Inlined List</li>

<li class="inlined">Inlined List</li></ul></div>

CSS

div { padding:10px; margin-bottom:15px; border:2px solid black; }

table, p, td, ul, li { margin-top:0px; margin-bottom:10px; padding-right:5px; }

p, td, ul, li { background-color:gold; padding-top:5px; padding-bottom:5px;

border-left:1px solid gray; border-right:2px solid black;

border-top:1px solid gray; border-bottom:2px solid black; }

.inlined { display:inline; line-height:normal; padding:5px; margin:5px; vertical-align:bottom;

}

table.inlined{ display:inline-table; }