I have some questions about line-height…
1.) What does this do to line-height?
body{
font-size: 0.9em;
line-height: 1.4;
}
2.) What would this do in combination?
body{
font-size: 0.9em;
line-height: 1.4;
}
a{
line-height: 1.2;
}
3.) Does “rem” work on line-height?
A quick answer. 
The unit less value will always be calculated according to the element’s current font-size.
The anchor gets its line-height recalculated according to its current font-size.
Yes rem is a unit just like em is.
You can test these things, you know. 
Note that setting a line height on the anchor won’t make any difference by default, as it’s an inline element and thus will effectively share the line height of the surrounding text. (You can change that by changing its display to something like inline-block or block.
Off-Topic
You should copyright that like Rudy did with “What happened when you tried it? ©”
(Sorry mikey_w, you would have to know to know the reference)
As is usually the case, I did test things and I wasn’t sure what was going on.
And as is often the case, you guys don’t give me much credit.
Well, it is on this code…
<body>
<div class="outermost">
<div class="outerwrap">
<div class="wrapper">
<nav>
<a href="#go1"><span>Responsive Design</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go2"><span>Mobile</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go3"><span>SEO</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go4"><span>Programming</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go5"><span>Business Development</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
</nav>
</div>
</div>
</div>
</body>
I was fiddling with the line height, because I have it set to 1.4 on the <body> and that seems like too much for my boxes.
BTW, I’m not sure if I totally agree with @ronpat’s approach here. It seems to me that I need a <p> or <hx> or something inside the <a>
Sorry to contradict Ralph but that’s not quite true.
Setting the line height on a block level element sets the minimum height of its line boxes but if you set a greater line-height on the anchor it will push the lines further away.
On block level elements, the line-height property specifies the minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that is used to calculate line box height. On replaced inline elements such as buttons or other input element, line-height has no effect.
If you set the anchor to a line-height less than that of the block element parent then nothng will happen but if you use a greater value the lines will move further apart.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
font-size: 0.9em;
line-height: 1.4;
}
.test {
line-height: 10;
}
a {
background:red
}
</style>
</head>
<body>
<p>This is some text <a href="#">in an anchor</a> with some text around it.</p>
<p>This is some text <a class="test" href="#">with line-height:10 in the anchor</a> with some text around it.</p>
<p>This is some text <a href="#">in an anchor</a> with some text around it.</p>
<p>This is some text <a href="#">in an anchor</a> with some text around it.</p>
<p>This is some text <a href="#">in an anchor</a> with some text around it.</p>
</body>
</html>
Even though HTML5 rules allow it, it’s still best to avoid having block element inside a link.
It’s fine to change the line height in the boxes. As said, it won’t have any effect if your links have the default display. We don’t know what conditions you’re working in, as we don’t have a complete picture of your CSS.
That would make a better focus for the question, with a specific example of what you tried, than an overly general question that’s been answered a million times online.
Would you change the HTML - relating to my “boxes” - in the code below?
<!doctype html>
<html lang="en">
<head>
<title>Our Services</title>
<!-- HTML Metadata -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Stylesheets -->
<style type="text/css">
/* Basic CSS Reset */
html, body, address, blockquote, div,
form, fieldset, caption,
h1, h2, h3, h4, h5, h6,
hr, ul, li, ol, ul, dl, dt, dd, br,
table, tr, td, th, p, img{
margin: 0;
padding: 0;
}
header, footer, nav, section, article, aside{
display: block;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
font-size: 0.9em;
line-height: 1.4;
color: #000;
background: #FFF;
}
/* Services Container */
.outermost{
width: 52em;
margin: 0 auto;
}
/* Services Subcontainer */
/* Creates empty subcontainer with a top padding (height)
of 20% of .outermost container */
.outerwrap{
/*
position: relative; /* Make positioned element. *
padding-top: 20%;
*/
}
/* Services Subcontainer2 */
/* Creates empty subcontainer stretched to fit .outerwrap container. */
.wrapper{
/*
position: absolute; /* Make positioned element.
top: 0;
left: 0;
right: 0;
bottom: 0;
*/
}
/* Services */
nav{
display: table;
table-layout: fixed; /* Equal-width Boxes. */
border-collapse: collapse;
width: 100%; /* 52em */
height: 100%; /* 20% of 52em */
background-color: #bdf;
/* overflow: hidden; /**/
}
a{
display: table-cell;
padding: 0.5em 0.8em 1em 0.8em; /**/
color: inherit;
line-height: 1.2;
text-decoration: none;
text-align: left;
vertical-align: top;
border: 1px solid #854;
}
a:hover{
color: blue;
text-decoration: none;
}
span{
display: table-cell;
width: 1%; /* use available space */
height: 2.4em;
text-align: center;
vertical-align: bottom;
font-weight: bold;
font-size: 1.2em;
}
@media screen and (max-width:53em){
.outermost{
width: auto;
}
.outerwrap,
.wrapper{
position: static;
}
.outerwrap{
padding-top: 0;
}
nav,
a,
span{
display: block;
width: auto;
height: auto;
text-align: left;
}
a+a{
border-top: 0;
}
}
</style>
</head>
<body>
<div class="outermost">
<div class="outerwrap">
<div class="wrapper">
<nav>
<a href="#go1"><span>Responsive Design</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go2"><span>Mobile</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go3"><span>SEO</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go4"><span>Programming</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go5"><span>Business Development</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
</nav>
</div>
</div>
</div>
</body>
</html>
Why are you throwing up in my thread?! 
Off-Topic
That’s the vBulletin “foot in mouth” smilie not vomiting i.e.
Oh. (That’s good, because I’m eating supper!)
It’s the old SPF :foot_in_mouth:
Nothing gross.
because I often mix up inline boxes, those that are residing on the line, with the containing line box, sometimes even calling them text boxes on the line.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.