<html>
<head>
<title>Comparison of positioning schemes</title>
<style>
body {
  font-size:12px;
/*  line-height: 200%;
  width: 400px;
  height: 400px; */
}
/*
p { display: block }
span { display: inline }
*/
#outer { color: red }
#inner { color: blue }
</style>
</head>
<body>
<p>Beginning of body contents.
<span id="outer"> Start of outer contents.
<span id="inner"> Inner contents.</span>
End of outer contents.</span>
End of body contents.
</p>
</body>
</html>