Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>EDIT</h2> <p>I have created a codepen to <a href="http://cdpn.io/yKDfd" rel="nofollow">demonstrate the leading that is created using the different values</a>. Hopefully this provides a better explanation. </p> <hr> <p>I can answer your questions, but only theorize (at this point) about the extra spacing you're seeing (and provide a potential work-around).</p> <h2>Your Questions</h2> <blockquote> <p>Is there an intentional semantic difference in CSS between 1.5 and 150% that accounts for the difference in behavior?</p> </blockquote> <p>There is, actually! </p> <p>The numeric factor (1.5 in this case) gets inherited and used to calculate the line-height of each descendant, relative to its font-size.</p> <p>The percentage factor (150%) is used to calculate a line-height based on the parent element's font-size. The resulting, pre-calculated value is then inherited by its descendants.</p> <blockquote> <p>Or, if they're meant to be the same, then which one is implemented incorrectly?</p> </blockquote> <p>They are intentionally different. (See the <a href="http://www.w3.org/wiki/CSS/Properties/line-height" rel="nofollow">W3C spec</a>)</p> <blockquote> <p>In practical terms, is there a downside to switching to raw decimals like 1.5 for line-height?</p> </blockquote> <p>Usually, it is an advantage to use the decimal values, because the inherited line-height will adapt better. But there are cases when it won't suit your needs.</p> <hr> <h2>Extra Spacing Issue</h2> <p>I noticed if I set <code>vertical-align</code> on your small text to <code>middle</code> or <code>bottom</code>, the problem doesn't happen. But this isn't a very good solution. </p> <p>I'm <em>guessing</em> this has to do with the fact that the smaller text is using the inherited calculated line-height, combined with it's placement on the line. Since the text is smaller and it sits lower, but has the same line-height as the surrounding line, the bottom half-leading will actually push further down, and the top half-leading won't reach as high as the surrounding text.</p> <p>So let's say the base font-size is 16px, and the line-height is 24px. The leading will be 4px on either side ((24-16)/2). When the font-size is 50%, that is 8px, but the line-height stays 24px. So the leading becomes 8px on either side ((24-8)/2). </p> <p>The baselines of the text will align, so all things being equal, you would expect the smaller text to extend 4px below the normal text. But since the text (and its corresponding content area) is smaller, the bottom half-leading starts farther back, which is why you only see a pixel or two change, and only at certain percentages (getting more as you get smaller - try it out)</p> <p>I really should use images for this, but can't right now... maybe I can add some later.</p> <p>I don't know if that helps at all, but I definitely have a better understanding of how <code>line-height</code> works in general now!</p> <p>References: <a href="http://www.w3.org/wiki/CSS/Properties/line-height" rel="nofollow">http://www.w3.org/wiki/CSS/Properties/line-height</a> <a href="http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/" rel="nofollow">http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/</a> <a href="http://www.maxdesign.com.au/articles/css-line-height/" rel="nofollow">http://www.maxdesign.com.au/articles/css-line-height/</a></p>
    singulars
    1. This table or related slice is empty.
    1. POWhy does unitless line-height behave differently from percentage or em in this example?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USTom Pietrosanti
    1. USTom Pietrosanti
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm afraid this answer merely restates the premise of the question. I've read the spec. I understand the semantic difference between the types of values. What I don't understand is the difference in behavior **in the example I've given**. [The spec](http://www.w3.org/TR/2011/PR-CSS2-20110412/visudet.html#propdef-line-height) predicts that they should render the same. But they don't. Hence the question.
      singulars
      1. PO
      1. USMatthew Butterick
    2. COI wonder if browser rendering also changes things. Is this consistent across all modern browsers?
      singulars
      1. PO
      1. USAhmed Sagarwala
    3. COThe spec doesn't quite say they will render the same, but you're right that it also doesn't directly explain the behavior. It says that Numbers calculate line height by multiplying by the font size, and that percentages multiply by the *computed* font size. I'll see if I can draw up something to test my theory on that empty space you're seeing.
      singulars
      1. PO
      1. USTom Pietrosanti
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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