with a font of 16px, i need a line-height of around 26px (around 10px of white space between 2 lines of text), so i set
body {
line-height:1.6
font-size:16px
}
Now the problem if in child elements i increase the font-size to for exemple 50px (title for exemple), then i will have a line height of 80px that mean around 30px of white space between 2 lines that is visually too much.
so is their a way to specify the line-height to be logarithmic ? more bigger the font is, more little the line height is ?
Related
See http://jsfiddle.net/6taruf65/1/
The following html appears as 20 pixels tall in Firefox31 and Chrome36 on Windows7. I expected it to be 16 pixels tall.
<style>
* { margin: 0; padding: 0; border: 0; overflow: hidden; vertical-align: baseline; }
</style>
<div style="font-size: 16px;">help 16px</div>
Notice the bottom of the p is cut off when you limit the div's height to 16px. That suggests to me there's unused space above the text. It might be a problem with vertical alignment. But then how would I go about preventing that issue when I want to precisely control the height and alignment of the text?
This is because the default line-height value that is applied by the user agent. Some of web browsers apply a line-height of 1.2em or 1.2 or 120% to the elements while the spec recommends:
We recommend a used value for normal between 1.0 to 1.2.
CSS Level 2 Spec states:
line-height
On a block container element whose content is composed of inline-level
elements, line-height specifies the minimal height of line boxes
within the element. The minimum height consists of a minimum height
above the baseline and a minimum depth below it, exactly as if each
line box starts with a zero-width inline box with the element's font
and line height properties.
The accepted values are normal | <number> | <length> | <percentage> | inherit
Hence, you could override the applied value by adding a line-height of 16px or simply a value of 100% or 1em or 1 to the element. (Click on each one to see the demo).
<number> - e.g. line-height: 1 - is the preferred value of line-height as it always refers to the element's font size. Therefore you don't have to specify different values for different font sizes.
For further info about the difference between these values, you could refer to my answer here:
Calculate line-height with font in rem-value
Maybe you need line-height: 16px;
The div size is not 20px because the font-size is larger than 20px when you have letters that hang below the baseline (such a p and q). If you want the div itself to be of height 20px, just set the div css to height: 20px.
JSFiddle
<div style="height: 20px; font-size: 20px; border:1px solid #444;">help 20px (with cut off text)</div>
<br />
<div style="height: 23px; font-size: 20px; border:1px solid #444;">help 20px (without cut off text)</div>
<br />
I'm having a strange issue, in this page there are two spans with different font-size.
The first span (with content "With empty title") has no explicit font size thus it inherits a font-size of 100%, in css inspector it becomes 12px. The second span with the word 'EMPTY', is initially hidden and is viewable by clicking on IT flag. It has this css applied
td {
.empty {
color: #bbb;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.2em;
}
}
According to inspector, when "EMPTY" span is shown its computed size is 9px, however when the second span is shown there is a 1px flickering for the containing tr, on my browser tr height changes from 32px to 33px with the higher value when empty span is shown.
Why is this happening? How to prevent that without changing span.empty font-size?
Span is an inline element and behave in the flow like letters or inline-boxes does.
It stands on the baseline, beneath the baseline , you have a gap that remains for letters such as : g,j,p,q,y,....
Letters and inline-boxes stands on baseline wich is the defaut vertical-align for any inline element. reset it to vertical-align:top or bottom and the gap will be part of area used.
If you reduce line-height, the baseline is reduced, and element 'too high' will be go over it.
Hope it's clear enough, do not hesitate to edit this post to turn it into proper english , thks (erasable line)
Simple test case:
http://cssdesk.com/K2xmN
Another Example:
http://developer.nokia.com/
Problem: When you change the zoom page to 90%, the border goes to 1.111 (1.333 at 75%) and breaks the layouts.
In the nokia website, you can see the top containers break because there is no space left. In the CSSDesk testcase, if you inspect the computed styles, you can see the border width going higher.
Why this happen? border is not set in EM or %, why does it scale?
The why has been explained but I though I'd share a workaround which I just discovered:
Often you can replace the border with a box-shadow that looks just like a border but doesn't add to the outer width of the element:
Instead of
border: 1px solid red;
write
box-shadow: inset 0 0 0 1px red;
width: 102px;
height: 102px;
The width and height of the div have to be adjusted accordingly to accomodate to the fact that the 1px of the borders on each side are gone now.
Now when zooming out the browser will still treat the box-shadow the same as the border, i.e. it won't shrink below 1px, but it will not influence the width of the element and thus the layout won't break.
Alternatively, you can probably use box-sizing: border-box; to some similar effect.
This is an artifact of the problem of scaling down a 1px border. To illustrate what happens, I have modified your test case to include zoom: 0.5;
in the css: http://cssdesk.com/zn4Lx
Notice that if you inspect the computed style, the border width will be 2px. What happens is that Chrome tries to scale down the element, but after scaling, the border still has to be 1px wide if it is to remain visible (after all, 1px is the smallest unit that can be rendered on the computer screen, and if the border width is scaled down to a floating point number smaller than 1.0, it will be rounded down to 0px and disappear). But to justify the scaling, it over-compensates by adjusting the initial width to satisfy the equation
new_width = old_width * scale
In this example, since new_width = 1px, and scale = 0.5, it re-calculates old_width as 2px. Note however that the actual width of the border that is rendered after the scaling is still just 1px.
So in your example, the adjusted old width will be approximately 1.11111111px, and the rendered border width will be 1px wide, but since all the other widths in the layout that are larger than 1px also have been scaled down by approximately 90%, there is no room for a 1px wide border, which results in a broken layout.
The box shadow solution by Shepard might not work well for elements with children that occupy all their space because the shadow will be covered by the children.
Another fix would be to use a border width larger than 1px but smaller than 1.5px.
border-width: 1.3px;
I found 1.3px or 1.4px to be the ideal value and it works in Chrome and IE11 with zoom >= 75%
I've been given a set of web pages to knock up, and one of the specifications from the designer is a set of vertical measurements from the baseline of fonts i.e. the height from the baseline to the block above is 50 pixels and to the block below to 30 pixels.
If I know the font size in pixel can anyone suggest a way to calculate the top and bottom margins (and / or line height etc).
The line-height CSS property can be set as a numeric value. So the calculated line-height will be numeric value * font size. If you set line height to 1, then the line height will be equal to the font size. Here is an example with font-size: 20px
div {
font-size: 20px;
padding-bottom: 30px;
padding-top: 30px;
line-height: 1;
}
I've tried the CSS below. All of the other specifications are working except the width. You can see an example of the being too wide here if you need to.
Thanks for your help - Tara
.title h2 {
margin:10px 0 0 0;
width:780px;
font-family: HarabaraHandItalic;
font-size: 30px;
padding: 0 0 0 15px;
color:#000;
}
The width you're using is too wide. Try to make the width 750px for example. You'll see that it works fine!
Keep in mind that the padding will be added to the width of the element.
In your case the h2 element is 780px (width) + 15px (padding-left) = 795px.
It is working fine here.
I suspect you are being confused about what width means. The property describes the content width. The padding (15px) and borders (0px) and margin (0) all appear around the width.
The container is only 670px wide anyway, so you probably don't want something that is 795px across (width plus padding) inside it.
You need to reduce both the "width" and the "font-size" to make it fit.
Or, if the font-size needs to stay the same, you need to reduce the amount of copy.