Add padding at the beginning and end of each line of text - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Text

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

Description

Add padding at the beginning and end of each line of text

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#titleContainer {<!--from   ww w  .ja  va 2s  . c o  m-->
   width:521px
}

h3 {
   margin:0;
   font-size:43px;
   font-weight:bold;
}

h3 .heading {
   background-color:Chartreuse;
   color:yellow;
}

h3 .subhead {
   background-color:blue;
   color:pink;
}

div {
   line-height:2.2;
   padding:2px 0;
   border-left:31px solid WhiteSmoke;
   display:inline-block;
}

h3 {
   background-color:OrangeRed;
   color:grey;
   display:inline;
   margin:0;
   padding:0
}

h3 .indent {
   position:relative;
   left:-16px;
}

h3 .subhead {
   padding:0 16px;
   float:left;
   margin:4px 0 0 -30px;
   outline:2px solid BlueViolet;
   line-height:2.16
}
</style> 
 </head> 
 <body> 
  <div id="titleContainer"> 
   <h3> <span class="indent"> <span class="heading">heading</span> <br> <span class="subhead">head</span> </span> </h3> 
  </div> 
  <!--[if IE]><style>
h3 .subhead {
    margin-left: -14px
}
      </style><![endif]-->  
 </body>
</html>

Related Tutorials