Untitled

<!DOCTYPE html>
<html>
<head
**/
Inline elements
/**
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
span {
  border: 1px solid red;
  margin-top: 10px;
  margin-bottom: 10px;

  padding-top: 10px;
  padding-bottom: 10px;

  width: 200px;

  padding-right: 20px;
  padding-left: 20px;

  line-height: 3em;
  vertical-align: 20%;
}

div {
  border: 1px  solid green;
  padding: 10px;
  margin: 10px;

  /*height: 400px;*/
  width: 300px;
}
</style>
</head>
<body>
  Content before<span>This is an inlina element</span>Content after

<div>
  Some content inside a DIV element.
   Lorem ipsum dolor sit amet, omnesque nominati nec cu, possit constituam honestatis in his. Ut feugiat laboramus maiestatis mea, ut everti apeirian dissentiet eam. Mea veri postulant ei, at wisi eleifend pro. Meis aliquam usu ea, mollis meliore ei vix. Te duo quod oportere, dolor nullam discere et vel. Oporteat gloriatur voluptatum ei sed.
</div>


<script id="jsbin-source-css" type="text/css">span {
  border: 1px solid red;
  margin-top: 10px;
  margin-bottom: 10px;

  padding-top: 10px;
  padding-bottom: 10px;

  width: 200px;

  padding-right: 20px;
  padding-left: 20px;

  line-height: 3em;
  vertical-align: 20%;
}

div {
  border: 1px  solid green;
  padding: 10px;
  margin: 10px;

  /*height: 400px;*/
  width: 300px;
}</script>
</body>
</html>