<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;
}
Related
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.
EDIT: Not a duplicate of:
Make child element (with padding) 100% width and height of parent
In that question, the person was in need of the box-sizing: border-box model. I already got that model on my snippet.
What I'm trying to wrap my head around is the fact that, when you're using the border-box model with padding and/or border set to the parent, a child with 100% of height/width will only inherit the content-box height/width of the parent, and not the proper height/width (element's inspected height/width) itself. Because if you inspect the parent in my snippet, you'll see height/width set to 100px. And the child will be 80px. So, how come 100% of a height/width of 100px could be equal to 80px? That was counter-intuitive for me, but I think the answer is on the bold parts of the MDN quote below.
MDN Source: box-sizing
By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added.
The box-sizing property can be used to adjust this behavior:
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.
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.
Original Question
I've been faced with a situation where a child element's width and height are set to 100% of the parent's width and height. And I'm using box-sizing: border-box;
Can somebody explain why that happens?
From MDN Docs on box-sizing, we get that:
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.
So in the following snippet, I was expecting that the child would cover completely the parent, because it would have width and height set to 100% of the parent. But that is not the case. The child gets 100% of the parent's height and width minus border and padding.
Question
If you inspect the elements (rendered by the snippet) you'll see that the parent height and width is 100px and the child is only 80px. Shouldn't it be also 100px, since it's set to 100%? Why this happens?
100% of the height is only related to the content box?
const parent = document.getElementById('parentDiv');
const child = document.getElementById('childDiv');
const parentStyle = window.getComputedStyle(parent);
const childStyle = window.getComputedStyle(child);
document.getElementById('description1').innerHTML = 'The parent height is: ' + parentStyle.height;
document.getElementById('description2').innerHTML = 'The child height is: ' + childStyle.height;
document.getElementById('description3').innerHTML = 'The parent width is: ' + parentStyle.width;
document.getElementById('description4').innerHTML = 'The child width is: ' + childStyle.width;
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
#parentDiv {
border: 5px dotted black;
background-color: red;
width: 100px;
height: 100px;
padding: 5px;
}
#childDiv {
background-color:blue;
width: 100%;
height: 100%;
border: 5px dotted green;
}
<div id="parentDiv">
<div id="childDiv"></div>
</div>
<h3>Height</h3>
<div id="description1"></div>
<div id="description2"></div>
<h3>Width</h3>
<div id="description3"></div>
<div id="description4"></div>
I want to understand the difference of those two thank you
max-width:100px
width:100px
body{
max-width: 1080px;
width: 1080px;
background-color: floralwhite;
margin:0px;
padding: 0px;
}
p{
width:100px; /* and max-width of 100px; */
padding: 20px;
margin:0px;
float:left;
}
You can think of the width property as being more strict than the max-width property.
Width says: "You should be this width and nothing else."
Max-width says: "Be whatever width you want, just not bigger than this width."
You can see this with the demo you provided. The natural width of the boxes is around 50px, not bigger than 100px so max-width doesn't really care. However, width sees that the boxes aren't 100px and so sets them to be 100px.
The max-width attribute only uses the entire width if needed, depending on the content or padding. The width attribute will always use the specified amount (in your case 100px).
See my example here.
You can read more about it on MDN:
max-width - The max-width CSS property is used to set the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
width - The width property specifies the width of an element. By default, the property defines the width of the content area. If box-sizing is set to border-box, it instead determines the width of the border area.
The max-width property is used to set the maximum width of an element.
This prevents the value of the width property from becoming larger than max-width.
Note: The value of the max-width property overrides width.
So if both are specified in the styles then if the width property is less than the max-width then the width property will be applied, else the max-width property will be applied instead.
I think if you specify the max-width only then the width property will default to 'auto' , but will still be restricted to the max-width specified.
There is an inline-block element with 100% height and width :
<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>
Why doesn't this div take up whole height, but takes up full width?
An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.
The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.
The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.
Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.
It takes height of its parent
try:
html,body {
height: 100%;
}
That's because a div by default takes full width, unless specified otherwise.
Making it inline-block, just allows it to be inline, but preserving its block nature such as setting width and height, top and bottom margins and paddings.
And the height of every element(not-null) in html markup is same as height of a line.. which can be changed by line-height property.
And if you wish it to take all-height, follow the above answers.
Because your html and body tags don't take full height.
Unless specified otherwise, block elements take full width, but only as much height as needed - it is only natural, since HTML was originally meant as a way to format text documents. You wouldn't want, say, a paragraph to take the full window height.
You must set their height to 100% to get it work - stretch them to the window height:
html, body {
margin: 0;
padding:0;
height:100%;
}
http://jsfiddle.net/gdyLs/1/
You need to specify height to html and body then only that div will take 100% height
html, body{
height: 100%;
}
I have a global reset that sets font-size and line-height to inherit for every element:
* {
font-size: inherit;
line-height: iherit; }
For html, i define them explicitly:
html {
font-size: 16px;
line-height: 1.25em; } /* 16×1.25 = 20 */
Note, that line-height is set in a relative unit.
For h1, i define different font-size:
h1 {
font-size: 4em; }
I expect h1 to inherit the relative line-height of 1.25em. The resulting line-height should be equal to 80px (16×4×1.25).
But in reality h1's line-height remains equal to 20px (that's the same as html's: 16×1.25=20).
Say, i have the following HTML:
<p>foo<br>bar</p>
<h1>foo<br>bar</h1>
Screenshot of the result:
http://jsfiddle.net/M3t5y/5/
To work around this problem, i have to define h1's line-height explicitly equal to the same value that it inherits:
h1 {
font-size: 4em;
line-height: 1.25em; }
Then line-height becomes correct:
http://jsfiddle.net/M3t5y/6/
It looks like the relative value is first calculated into the absolute value and then the absolute value is inherited. Or maybe it is inherited relative to the parent's font-size, not the element's font-size.
Questions
Why is the relative line-height inherited incorrectly?
How do make the relative line-height be inherited as a value relative to the element's font-size, not its parent's?
PS There's a question with a similar problem in its title, but it is different in detail.
When you use em values for line height, the value of the line height is computed, and it is that computed value which is also used by child elements.
If you use a bare number instead, it is the ratio that is used for the calculation of child element line-heights.
So use line-height:1.25; instead of line-height:1.25em;
line-height is calculated on the element and then that element is inherited when you use em. If you inspect your first example you'll notice that the computed value for line-height is 20px (16x1.25), not 1.25em.
You can use line-height:1.25 and it will be computed on the correct element.