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;
}
Related
<p>Alternatively, you can use percentages, which
will be calculated with respect to the width of the generated box's
containing block. 😅Therefore, assuming the container's width
is greater than the image's height, margin: -50% 0 should be enough.
Hide code snippet
</p>
How to avoid change in line-height on insertion of emojis?
You can set a fixed line-height like so:
p {
line-height: 20px !important;
}
<p>Alternatively, you can use percentages, which
will be calculated with respect to the width of the generated box's
containing block. 😅Therefore, assuming the container's width
is greater than the image's height, margin: -50% 0 should be enough.
Hide code snippet
</p>
Set CSS property line-height to 1.2em could set the p tag to default height
p {
line-height: 1.2em;
}
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 1 year ago.
Using padding causes columns to not display properly.
/*Column code*/
.column {
float: left;
width: 50%;
font-family: 'Trebuchet MS', sans-serif;
padding: 1cm;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width:600px) {
.column {
width: 100%;
}
}
Columns with padding.
Columns without padding.
cm is not recommended for screens try changing padding to percentage or px.
have a look at this blog for details
You have set the width of each column to 50%. If there is no padding (or margin or border) on each of those elements then two will fit in the width of the viewport (when that is above your media query).
However, when you add padding the overall width of each column goes up to 50% + 2xpadding.
This happens if the box-sizing is set at the default.
You can override this by setting box-sizing: border-box this will include padding etc in the set width.
Further info at MDN:
content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
border-box tells the browser to account for any border and padding in
the values you specify for an element's width and height. If you set
an element's width to 100 pixels, that 100 pixels will include any
border or padding you added, and the content box will shrink to absorb
that extra width. This typically makes it much easier to size
elements.
This question already has answers here:
How does rem differ from em in CSS?
(12 answers)
Closed 2 years ago.
To recap, the em unit means "my parent element's font-size" in the
case of typography. The <li> elements inside the <ul> with a class of
ems take their sizing from their parent. So each successive level of
nesting gets progressively larger, as each has its font size set to
1.3em — 1.3 times its parent's font size.
To recap, the rem unit means "The root element's font-size". (rem
stands for "root em".) The <li> elements inside the <ul> with a class
of rems take their sizing from the root element (<html>). This means
that each successive level of nesting does not keep getting larger.
This is the explanation that Mozilla provides.
I can see that in my places of other people's code, they have padding: 1.5rem. It means that rem and em are not coupled to font-size at all. Is that right ?
Question 1) So, if I set padding:1.5rem on an element, what size will it have ? what does it look at so that it can figure out its own padding size ?
Question 2) What about padding:1.5em ?
Yes, you can use em and rem for any measure of length.
Question 1) So, if I set padding:1.5rem on an element, what size will it have? what does it look at so that it can figure out its own padding size ?
If the padding of an element is 1.5rem, it will have a padding length of 1.5 times the font size of the html element. In the example below, the outer box has a padding of 1.5x or 15px, and the inner box is 2x or 20px.
html{
font-size: 10px;
}
.p,.c{
border: solid 1px #f00;
}
.p{
padding: 1.5rem;
}
.c{
padding: 2rem;
}
<div class='p'>
<div class='c'></div>
</div>
Question 2) What about padding:1.5em ?
An element with 1.5em padding will take 1.5x the font-size of the nearest parent (including self) with a font size set. So if you set the font size of the outer box from the previous example to 8px, it will have 1.5x or 12px of padding, and the inner element will have 2x or 16px padding.
html {
font-size: 10px;
}
.p,
.c {
border: solid 1px #f00;
}
.p {
font-size: 8px;
padding: 1.5em;
}
.c {
padding: 2em;
}
<div class='p'>
<div class='c'></div>
</div>
Answer1: So if you set padding:1.5rem , it will take the size according to root font size of root HTML that is 24px. (1rem is 16px by default)
It will further set the padding space according to given value and multiplies it by the font size of root element(HTML).
Answer2: And it causes same with em , it will multiplies the em's value according to the font size given.
By default it is 12px for 1em. So if you set paddind:1.5em it will add a padding space of 16px.
May this helps.
Note: em to px and rem to px values may vary accordingly.
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 have a block with a certain line-height, where I insert content with the ::before pseudo element.
.block::before {
content:'text here';
}
This works well. However, if I also give the content a smaller font size
.block::before {
font-size:.6em;
content:'text here';
}
the block actually becomes higher. Why is that?
.container {
display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
line-height:3em; border:1px solid green
}
.ipsum:before {
content:'world!';
}
.sit:before {
font-size:.6em;
content:'world!';
}
<div class="container">
<div class="lorem">Hello</div>
</div>
<div class="container">
<div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
<div class="dolor">Hello</div>
</div>
<div class="container">
<div class="sit"></div>
</div>
The top row doesn't have font size changes, the bottom row does.
Now I found out that a possible solution is to set the line-height of the pseudo element to 0. Or to 1em. Or even to normal. So what is going on? Is the line-height set to some weird value by setting the font size to .6em? Why?
PS Although this looks like a duplicate (see the list to the right), none of the answers I've read so far explains why setting line-height:normal solves the issue. There must be something happening that sets the line-height to a greater value implicitly. And that's what I'm trying to find out.
Edit: This question has had quite a number of new eyeballs lately, so here's an update to make it more useful.
Alohci's solution is correct, but it may not be absolutely clear for the more graphically-inclined.
So allow me to clarify the solution a bit, with pictures.
First, the line-height is inherited as its calculated size, so although it's specified in em units, children will inherit value in pixels. For example, with a font size of 20px and a line height of 3em, the line height will be 60 pixels, even for descendants with different font sizes (unless they specify their own line heights).
Now let's assume a font with a 1/4 descender. That is, if you have a 20px font, the descender is 5 pixels and the ascender 15 pixels. The remaining line-height (in this case, 40 pixels) is then divided equally above and below the baseline, like this.
For the block with the smaller font (0.6em or 12 pixels), the remaining amount of line-height is 60-12 or 48 pixels, which also gets divided equally: 24 above and 24 below the baseline.
Then if we combine the two fonts on the same baseline, you will see that the line heights are not divided in the same way, so the total height of the containing block increases, even though both line heights are 60 pixels.
Hope this explains things!
The height of the .lorem, .ipsum, .dolor, and .sit boxes is each the height of the single line box that they contain.
The height of each line box is the maximum of the height above the baseline + the maximum height below the baseline of the strut of the line and the text in the line. since the strut and the text are aligned on the baseline.
For clarity, heights below in em, refer to the font size of the overall container (i.e. the body element)
In .ipsum, (where the font size is 1em) the height above the baseline is 1em (the upper half-leading) + 13/16em (the ascender, approx) for both the strut and the text, and the height below the baseline is 1em (the half-leading) + 3/16em (the descender, approx) + 1em (the lower half-leading) making a total of 3em.
In .sit (where the font size is 0.6em) the height above the baseline is the maximum of [1em (the upper half-leading) + 13/16em (the ascender, approx) for the strut] and [1.2em (the upper half-leading) + 0.6 x 13/16em (the ascender, approx) for the text], and the height below the baseline is the maximum of [1em (the lower half-leading) + 3/16em (the descender, approx) for the strut] and [1.2em (the lower half-leading) + 0.6 x 3/16em (the descender, approx) for the text].
Evaluating that and converting to decimal gives 1.8125em above the baseline and 1.3125em below the baseline making a total of 3.125em, which is larger that the 3em of .ipsum.
Since there are already two answers that explain well why the height is increased, to quickly fix this problem you simply need to remove the units in line-height.
.lorem, .ipsum, .dolor, .sit {
line-height:3; border:1px solid green;
}
According to MDN
The line-height CSS property sets the height of a line box. It's
commonly used to set the distance between lines of text. On
block-level elements, it specifies the minimum height of line boxes
within the element. On non-replaced inline elements, it specifies the
height that is used to calculate line box height.
Values
normal Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the
element's font-family.
number (unitless) The used value is this unitless number multiplied by the element's own font size. The computed value is the
same as the specified number. In most cases, this is the preferred
way to set line-height and avoid unexpected results due to
inheritance.
length The specified length is used in the calculation of the line box height. Values given in em units may produce unexpected results.
percentage Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's
computed font size. Percentage values may produce unexpected results.
So basically your question is one of the cases of unexpected results due to inheritance.
.container {
display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
line-height:3; border:1px solid green;
}
.ipsum:before {
content:'world!';
}
.sit:before {
font-size:.6rem;
content:'world!';
}
<div class="container">
<div class="lorem">Hello</div>
</div>
<div class="container">
<div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
<div class="dolor">Hello</div>
</div>
<div class="container">
<div class="sit"></div>
</div>
Hi please add a specific height on your box...
.lorem, .ipsum, .dolor, .sit {
border:1px solid green;
height:30px;/*changes*/
}
Fiddle :http://jsfiddle.net/jxf29/
The font property on .sit:before is affecting this, the content property of css follows the current elements' css properties very stricly,
Its because of this that you can be able to manipulate the value of the content property within the same style that the content property is created
e.g
sit {
color: green;
}
sit:before{
content: "text-here";
color: red;
}
this would emphasize the color to be red.