Aligned to baseline, lowered to baseline and raised to baseline : vertical align : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » vertical align »

Aligned to baseline, lowered to baseline and raised to baseline


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
.parent{
   width: 600px;
   height: 600px;
   background: gray;
}
* .baseline {
  vertical-align: baseline;
  background: black;
  color: white;
}

* .raised {
  vertical-align: 10px;
  background: red;
}

* .lowered {
  vertical-align: -10px;
  blackground: yellow;
}
</style>
</head>
<body>
<div class="parent">
    <p>
        <span class="baseline">Aligned to baseline.</span> 
        <span class="lowered">Lowered relative to the baseline.</span> 
        <span class="raised">Raised relative to... </span>
    
    </p>
    
</div> 
</body>
</html>