Can I use CSS or other method to change line height of a
?
Please help, I’m teaching myself CSS. I am an experienced search engine optimizer, but actually coding a Web site can be shaky. Have a space between a heading and some text that I need to make about half as small. But, all I can get it to do is stay the same or disappear completely. I know this is probably basic, but my college degree is in business (not computer science!) and this is all copmletely self taught through w3schools.com.
4 Responses
J P
31 Jan 2010
| |0I-I4MM4D
31 Jan 2010
Hey, you can use ‘class’ property of <br /> tag:
use this structure:
In HTML:
<br class="MyClassName" />
In your style .CSS file:
.MyClassName
{
.height: 1px;
}
Also you can set the height of your <br /> tag without using .Css by write css codes straightly in your tag:
<br style="height: 1px;" />
If you have any other questions just keep me posted.
tiggsy
31 Jan 2010
Trying to do use <br /> as a layout item, rather than a line break might cause problems in some browsers. You’re best doing as suggests and modifying the characteristics of your heading tag.
There’s a good CSS1 reference here:
http://www.zvon.org/xxl/css1Reference/Output/index.html
However, I would just like to say that we lowly web designers have enough competition without you highly valued SEO gurus muscling in on the act! ;}
bodhost.co.uk
31 Jan 2010
This is how you can change line height of a <br/>
Value: normal | <number> | <length> | <percentage>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: relative to the font size of the element itself
The property sets the distance between two adjacent lines’ baselines.
When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).
Negative values are not allowed.
The three rules in the example below have the same resultant line height:
DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
A value of ‘normal’ sets the ‘line-height’ to a reasonable value for the element’s font. It is suggested that UAs set the ‘normal’ value to be a number in the range of 1.0 to 1.2.
A better solution would be to set either the margin of the header, or the margin of the text area. <br /> is not really a layout tool its a line break. If you really want to become proficient in CSS learn to use margins and padding to position elements relative to each other. If you want a 10px gap below a header just add style="margin-bottom:10px;" to the tag the encloses your header.