Note that there are some explanatory texts on larger screens.

plurals
  1. POControlling the line-height of a <br> tag within a heading tag?
    primarykey
    data
    text
    <p>I have a heading (<code>&lt;h1&gt;</code>) that has a sort of tagline below it. (I used a <code>&lt;small&gt;</code> tag and set <code>font-size</code> to a certain percent so it lines up perfectly when I change <code>font-size</code> of the heading for smaller screens. I'm using <code>em</code> units, if that matters.)</p> <p>At first, the <code>&lt;small&gt;</code> tag sat nicely underneath the main heading, but I realized I forgot the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the spacing was all wrong.</p> <p><strong>Here's my code:</strong></p> <p>HTML:</p> <pre class="lang-html prettyprint-override"><code>&lt;h1 class="banner"&gt;Justin Wilson&lt;br /&gt;&lt;small&gt;WEB + GRAPHIC DESIGNER&lt;/small&gt;&lt;/h1&gt; </code></pre> <p>CSS:</p> <pre class="lang-css prettyprint-override"><code>h1.banner { text-align: center; display: block; font-family: 'arvil'; font-size: 6.5em; color: #94babd; } h1.banner &gt; small { font-family: Helvetica, Arial, sans-serif; font-size: 27%; color: #888; letter-spacing: 1px; font-weight: 100; } </code></pre> <p><strong>And here's the before and after:</strong></p> <p><img src="https://i.stack.imgur.com/BJELv.png" alt="Before and after doctype declaration"></p> <p>I have searched through StackOverflow, but I'm not sure how to proceed. I've read that a <code>&lt;br /&gt;</code> tag simply line breaks, but it inherits the line-spacing, and <code>line-spacing: (value)</code> does not work, nor do margins or padding.</p> <p>What I need is a simple, cross-browser solution. I used Chrome for the screenshot. Support for IE6-7 is not needed, though support for IE8 would be nice.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload