Inline formatting 01 mix

by kmouse

HTML

<div class="paragraph">
  In consectetur, <span class="outer"><span class="inner">eu velit</span> nunc.<span class="inner inline-block">Donec</span> aliquet <span class="inner">malesuada iaculis.</span></span>
  Nullam <span class="outer inline-block"><span class="inner inline-block">venenatis</span> mattis</span>.
</div>

CSS

body {
	border: 12px solid #ccc;
	background: #ccc;
	font-family: sans-serif;
	font-size: 13.5px;
}
span {
	color: red;
}
span.outer {
	padding: 5px;
	border: 4px solid #ee0;
	margin: 5px;
}
span.inner {
	padding: 5px;
	border: 2px solid #00e;
	margin: 5px;
}
.paragraph {
	margin: 15px 0;
}
.inline-block {
	display: inline-block;
}