line-height problems

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

    Environ: IE8,  Chrome (version: 25.0.1364.152 m), FF (version 16.0.2) ,  
Safari (version 5.1.7)  all running on my Win XP Pro machine


    I trying to modify the amount of vertical space skipped on the <br />  

   I'm tried several variations on the following 'line-height' attribute:


I've even tried variations of:
    <br style="etc, etc, line-height:0.5em;" />
    (but this doesn't work either)
    They all seem to work on values *greater than*  1em.  (i.e., 4.0em  
produces a large gap, 2.0 half the size of 4em., etc

However, below 1.0 em the vertical gap does *not* change (I've used  
percentage values, px values, and still no change less than a standard <br  


    How do I make the <br /> vertical distance to become smaller than 1.0  
'normal' lines.

Thank you,

-Mel Smith

Mel Smith

Re: line-height problems

Quoted text here. Click to load it

I do not think that attribute does what you think it does?
"On a block container element whose content is composed of inline-level
 elements, 'line-height' specifies the minimal height of line boxes  
 within the element."

Note the word "minimal"

In other words, it can be as small as that value, but will be larger
if needed to display the content.

This is really a CSS question, though, so follow-ups set accordingly.

Re: line-height problems

On 03/05/2013 01:52 PM, Mel Smith wrote:
Quoted text here. Click to load it
  What is the context of the markup where you are using a <br>?
  Why is it more appropriate than a <p> or <div>?

James Moe
jmm-list at sohnen-moe dot com

Re: line-height problems

James said:

Quoted text here. Click to load it


    There is no 'context' as such.  I'm already at the top of a <div> with a  
black border around it, and I want to place some centered, underlined text a  
bit below the top of the <div> without setting up a new <p> or a new  
<div> --- just about 1/2 of a <br>, but something I can manipulate quickly,  
and easily.

    All I want to do is have a simple way for a <br /> to skip vertically a  
'percentage' of the normal line-height of a <br />. If this is not easily  
possible with a <br> then I'll forget it.



Re: line-height problems

Quoted text here. Click to load it

James, please tell the OP that he has been told how to do roughly just  


Re: line-height problems

On 2013-03-07, Mel Smith wrote:
Quoted text here. Click to load it

   I think you want padding:

     <div style="padding-top: .5em;">

Chris F.A. Johnson

Re: line-height problems

Chris said:

Quoted text here. Click to load it

Hi Chris:

    I'll try the 'padding' route tomorrow morning. It probably what I need

Thanks for the hint !


Re: line-height problems

On Thu, 7 Mar 2013 16:43:35 -0700, Mel Smith wrote:

Quoted text here. Click to load it

The impression I'm left with is that you think a <br /> is somehow
tantamount to a typewriter's carriage return, or a Unix newline. I used to
think that, too ... but it's a badly limping analogy. There are contexts
(after the last line of text in a table cell for example, if memory serves)
in which any number of <br> entries delivers no more added vertical skip
than just one does; and others (though memory won't tell me which) in which
the <br> might just as well not be there at all, for all the vertical skip
it delivers.

So just try Chris Johnson's padding approach instead :-) . Cheers, -- tlvp
Avant de repondre, jeter la poubelle, SVP.

Site Timeline