Re: line-height suggestions and easier alignment

On 29/12/2011 11:59 PM, Richard Le Poidevin wrote:
> Hello Alan,
>
> Using percentages may be better but it doesn't fix the problem I was
> outlining. In your example you've changed the padding of the containing
> elements to align everything. This is precisely the problem I am trying
> to avoid as it feels very hacky and if the content is dynamically
> generated you can't guarantee what will be displayed. For instance on
> some pages of a site the central column may need to display images, or
> text at a different size or any number of permutations. Also, if the
> text doesn't need a background colour there would be no need for the
> padding in the first place so adding it just for alignment feels sloppy
> and is harder to maintain.

Then just simply apply the padding to the actual elements in question 
and not their containers. Like so.


<!doctype html>
<html lang="en">
     <head>
         <meta charset="utf-8">
         <title>line-height example 1</title>

<style>
  body > p::after 
{width:600px;background:red;height:1px;margin-top:4.5em;content: 
'';position:absolute;left:8px;}
  h1, p {
   margin: 0 0 0.5em 0;
             }
  #column1, #column2 {
   float: left;
   margin-right: 20px;
   width: 220px;
   background-color: #DDD;
  }
  #column3 {
   float: left;
   margin-right: 20px;
   width: 80px;
   background-color: #DDD;
}
  #column1, #column2, #column3 {padding: 0 0.5em;}

  #column1 > h1 {
   font-size: 200%;
   line-height:150%;
}
  #column2 > h1 {
   font-size: 125%;
   padding: 0.45em 0;
}
  #column3 > p:first-child {
   font-size: 75%;
   line-height: 1;
   padding: 1em 0;
}
  body > p {
   margin-bottom: 40px;
   width: 600px;
  }
</style>

     </head>
     <body>

         <p>In this example all the boxes have equal padding. The only 
changes are the font-size and the line-height.
             The line-height has been set to demostrate how the top 
lines of each column don’t align. This is because
             line-height gets applied equally to the top and bottom of 
each line. Aligning columns is a very common
             requirement when building sites but is is currently much 
harder than it should be.</p>

         <aside id="column3">
             <p>Lorem ipsum do lor</p>
             <p>Sit amet, conse ctetur</p>
             <p>adipi scing elit</p>
             <p>sed ante quis enim</p>

             <p>Proin a augue quam</p>
             <p>Nul lam iac ulis viverra</p>
         </aside>
         <article id="column1">
             <h1>This is my multi-line heading</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
In sed ante quis enim ultrices facilisis.
                 Proin a augue quam, id cursus sapien. Maecenas sit amet 
leo eget nunc aliquam iaculis et quis elit.
                 Nullam iaculis viverra eros, at viverra tortor iaculis ac.
             </p>
             <p>Nullam blandit pharetra blandit. Sed porttitor mauris ac 
justo scelerisque malesuada. Lorem ipsum dolor
                 sit amet, consectetur adipiscing elit. Etiam facilisis 
est vitae urna aliquet interdum. Vestibulum
                 lacus nisi, gravida rhoncus venenatis non, accumsan 
quis lectus. Duis eu libero a dolor semper ornare
                 at id quam. Morbi blandit, odio quis ultricies ornare, 
ante nisl tempor odio, ac cursus neque sapien
                 sit amet purus. Sed sodales metus vel neque sagittis 
eleifend.</p>

         </article>
         <aside id="column2">
             <h1>This is my multi-line heading set in a different size</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
In sed ante quis enim ultrices facilisis.
                 Proin a augue quam, id cursus sapien. Maecenas sit amet 
leo eget nunc aliquam iaculis et quis elit.
                 Nullam iaculis viverra eros, at viverra tortor iaculis ac.
             </p>
             <p>Nullam blandit pharetra blandit. Sed porttitor mauris ac 
justo scelerisque malesuada. Lorem ipsum dolor
                 sit amet, consectetur adipiscing elit. Etiam facilisis 
est vitae urna aliquet interdum. Vestibulum
                 lacus nisi, gravida rhoncus venenatis non, accumsan 
quis lectus. Duis eu libero a dolor semper ornare
                 at id quam. Morbi blandit, odio quis ultricies ornare, 
ante nisl tempor odio, ac cursus neque sapien
                 sit amet purus. Sed sodales metus vel neque sagittis 
eleifend.</p>
         </aside>


     </body>
</html>









-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Thursday, 29 December 2011 13:16:40 UTC