1

I cannot get the text inside my <header> to align to a baseline grid when the text wraps.

HTML:

<header>
    <h1>Sample Title</h1>
    <p class="tag">#Tag</p>
</header>

CSS:

header {
    display: block;
    }

h1 {
    display: inline;
    font-size: 36px;
    line-height: 36px;
    margin: 0 24px 0 0;
    }

p {
    display: inline-block;
    font-size: 18px;
    line-height: 36px;
    margin: 0 24px 0 0;
    }


[Good] Text without wrapping
Text without wrapping

[Bad] Text does not align to grid when it wraps between <h1> and <p>
enter image description here

[Good] Text aligns to grid when it wraps through <h1>
Text wraps properly when line breaks across <h1>


I followed @sled's suggestion to set line-height: 0 on <header>, but that gave me the opposite problem:

[Good] Text aligns to grid when it wraps between <h1> and <p>
enter image description here

[Bad] Text does not align to grid when it wraps through <h1>
enter image description here

Community
  • 1
  • 1
Brandon Lebedev
  • 2,717
  • 6
  • 24
  • 35
  • When `line-height: 0` is set on `
    ` Firefox increases the height of `

    `. When `

    ` wraps, Firefox calculates `

    `'s height as 77px instead of 72px.

     – Brandon Lebedev May 22 '13 at 18:17
  • @sled's suggestion also said to float the `

    ` and `

    ` elements. Unfortunately, floating `

    ` and `

    ` pushes `

    ` to a new line when `

    ` wraps.

     – Brandon Lebedev May 22 '13 at 18:20

2 Answers2

0

Vertical alignment defaults to baseline, but takes it's "typography" characteristics from it's parent. <header> has nothing to pass on to it's children so they're left to default values. But since your looking for your #tag element to adjust with your <h1> element, try this:

First, change your <p> to a <span>, you can just as easily turn a <span> into an inline-block as a <p> and not have to then correct for all the margin and padding (cleaner CSS).

Then place the <span> within the <h1> tag

HTML:

<header>
    <h1>Sample Title
        <span class="tag">#Tag</span>
    </h1>
</header>

CSS:

h1 {
    line-height: 36px;
    font-size: 36px;
    margin: 0 24px 0 0;
}
span {
    font-size: 18px;
}
fnostro
  • 4,531
  • 1
  • 15
  • 23
  • Your solution works, but it introduces a new problem. I used the right margins on `

    ` and `

    ` to put a 24px space between the two elements when they were on the same line. Since the space was a right margin, it wouldn't introduce an awkward indent when the wrap would occur between `

    ` and `

    `. Now that `

    ` is inside of `

    `, I can't use that right margin.

     – Brandon Lebedev May 22 '13 at 19:18
  • Also, you're solution obscures the semantic meaning of my HTML. – Brandon Lebedev May 22 '13 at 19:19
  • so change the span in the above to an `inline-block` and add a 24px left margin – fnostro May 22 '13 at 19:27
  • The left margin IS the problem. – Brandon Lebedev May 22 '13 at 19:28
  • Originally you asked how to make the font's align correctly on wrapping. To do that elements need to share the "typography" characteristics which means they need to inherit from the parent. You could try specifying the typography in `
    ` and let h1 and p inherit from that
     – fnostro May 22 '13 at 19:37
  • What typography characteristics are you referring to? The two elements have different `font-family`, `display`, `font-size`, and `top` (to set the baseline grid) attributes. – Brandon Lebedev May 22 '13 at 19:47
  • I'm refering to any css that has to do with font's and such....maybe this will help: http://jsfiddle.net/wybne/ – fnostro May 22 '13 at 19:50
0

Set vertical-align on <p> to bottom. Setting line-height on <header> is not necessary.

Brandon Lebedev
  • 2,717
  • 6
  • 24
  • 35