<p>Using CSS,</p>

<p>I'm trying to specify the height of a <code>span</code> tag in Firefox, but it's just not accepting it (IE does).</p>

<p>Firefox accepts the <code>height</code> if I use a <code>div</code>, but the problem with using a <code>div</code> is the annoying line break after it, which I can't have in this particular instance. </p>

<p>I tried setting the CSS style attribute of: <pre>display: inline</pre> for the <code>div</code>, but Firefox seems to revert that to <code>span</code> behavior anyway and ignores the <code>height</code> attribute once again.</p>

[{'answer_id': 25045, 'author': 'Cade', 'author_id': 565, 'author_profile': 'https://Stackoverflow.com/users/565', 'pm_score': 2, 'selected': False, 'text': "<p>Since you're displaying it inline, the height should be set at the height of your line-height attribute.</p>\n\n<p>Depending on how it's laid out, you could always use float:left or float:right on the span/div to prevent the line break.  But if you want it in the middle of a sentence, that option is out.</p>\n"}, {'answer_id': 25047, 'author': 'ceejayoz', 'author_id': 1902010, 'author_profile': 'https://Stackoverflow.com/users/1902010', 'pm_score': 4, 'selected': False, 'text': "<p>Inline elements can't have heights (nor widths) like that. SPANs are already <code>display: inline</code> by default. Internet Explorer is actually the broken browser in this case.</p>\n"}, {'answer_id': 25049, 'author': 'Ross', 'author_id': 2025, 'author_profile': 'https://Stackoverflow.com/users/2025', 'pm_score': 1, 'selected': False, 'text': '<p>You can only change the height (and width) of a span element when it is set to <code>display: block;</code>. This is because it is an inline element normally. <code>div</code> is set to <code>display: block;</code> normally.</p>\n\n<p>A solution could be to use:</p>\n\n<pre><code>&lt;div style="background: #f00;"&gt;\n    Text &lt;span style="padding: 14px 0 14px 0; background: #ff0;"&gt;wooo&lt;/span&gt; text.\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 25051, 'author': 'Konrad Rudolph', 'author_id': 1968, 'author_profile': 'https://Stackoverflow.com/users/1968', 'pm_score': 1, 'selected': False, 'text': "<p>The problem is that 'display: inline' can't get a height associated because, being inline, it gets its height from its the content. Anyway, how do you define the height of a box that is broken at the end of a line?</p>\n\n<p>You might try to set 'line-height' instead, or if this doesn't work to your satisfaction, set a padding:</p>\n\n<pre><code>/* makes the whole box higher by inserting a space between the border and the content */\npadding: 0.5em 0;\n</code></pre>\n"}, {'answer_id': 25053, 'author': 'Cade', 'author_id': 565, 'author_profile': 'https://Stackoverflow.com/users/565', 'pm_score': 5, 'selected': True, 'text': '<pre><code>&lt;style&gt;\n#div1 { float:left; height:20px; width:20px; }\n#div2 { float:left; height:30px; width:30px }\n&lt;/style&gt;\n\n&lt;div id="div1"&gt;FirstDiv&lt;/div&gt;\n&lt;div id="div2"&gt;SecondDiv&lt;/div&gt;\n</code></pre>\n\n<p>As long as the container for whatever is holding <code>div\'s</code> 1 and 2 is wide enough for them to fit, this should be fine.</p>\n'}, {'answer_id': 25110, 'author': 'Dan Herbert', 'author_id': 392, 'author_profile': 'https://Stackoverflow.com/users/392', 'pm_score': 5, 'selected': False, 'text': '<p>You can set any element to <code>display: inline-block</code> to allow it to receive a height or width. This also allows you to apply any other "block styles" to an element.</p>\n\n<p>One thing to be careful about however is that Firefox 2 does not support this property. Firefox 3 is the first Mozilla-based browser to support this property. All other browsers support this property, including Internet Explorer.</p>\n\n<p>Keep in mind that <code>inline-block</code> does not allow you to set text alignment inside the element on Firefox if running in quirks mode. All other browsers allow this as far as I know. If you want to set text-alignment while running in quirks mode, you\'ll have to use the property <code>-moz-inline-stack</code> instead of <code>inline-block</code>. Keep in mind this is a Mozilla-only property so you\'ll have to do some browser detection to ensure only Mozilla gets this, while other browsers get the standard <code>inline-block</code>.</p>\n'}, {'answer_id': 719266, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p><code>height</code> in <code>em</code> = <code>relative line-height</code></p>\n\n<p>for example <code>height:1.1em</code> with <code>line-height:1.1</code></p>\n\n<p>= 100% filled</p>\n'}, {'answer_id': 731438, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>text alignment inside the element you can adjust using the padding and block-inline attributes. display:inline-block; padding-top:3px; for example</p>\n'}, {'answer_id': 909584, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>To set height of span following should work in firefox</p>\n\n<pre class="lang-css prettyprint-override"><code>span {\n  display: block;\n  height: 50px;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/25041', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1693/']