Adjusting line-height after larger first-letter - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Height

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Height

Description

Adjusting line-height after larger first-letter

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
fieldset {<!-- www  . j  a va 2s  .c o  m-->
   margin-top:51px;
}

legend {
   background-color:Chartreuse;
}

#fs2 legend:first-letter {
   font-size:6em;
}

#fs3 legend:first-letter {
   font-size:6em;
   line-height:0;
}

#fs3 legend {
   height:2em;
   position:relative;
   top:-.76em;
}
</style> 
 </head> 
 <body translate="no"> 
  <fieldset id="fs1"> 
   <legend>1. Title</legend> Some text inside. 
  </fieldset> 
  <fieldset id="fs2"> 
   <legend>1. Title</legend> Some text inside. 
  </fieldset> 
  <fieldset id="fs3"> 
   <legend>1. Title</legend> Some text inside. 
  </fieldset>  
 </body>
</html>

Related Tutorials