Hello my fellow CSS enthusiasts. It's not usual that I can not answer a CSS question.
The bug happens in Chrome and IE11, Firefox renders it the same size but different clipping.
I have an inputfield and a div filled with text, they should have the same height and should scale with the parent font-size. The problem is that the inputfield is bigger than expected.
Demo: http://jsfiddle.net/7Lg70qc4/
The div behaves like I expected, its height is font-size + padding * 2, but the inputfield is bigger than that.
I can not set the height as em since the padding is fix, but the font-size is not.
Why is the input bigger than the div?
You have to define :first-line pseudo element for input to make your both elements same height.
input:first-line {
display: inline-block;
}
Here you can find more information why it works.
if the height of the input is auto, and its height is only comprised by the size of the font-size, i mean, without padding and border, letting the font-size be Xpx, the height of the input will always be slighter bigger,
the reason for that is to accommodate the "leg" of letters like "j" and "g".
Try setting font-size to Xpx, height to Xpx, and input "j" or "y" to the input,
there will be a minor crop.
In addition, put height:auto; font-size:Xpx; and line-height:2;
this time the height will be exactly 2 * Xpx, because with the line-height at 2, there will be room to take in the "legs" of the specific letters i mentioned above.
This subject, context, can also be comparable to another one that has to do with that thin space at the bottom of an image with display:inline; inside of a div, this is easier seen if both elements have a border like border:1px solid Crimson; for instance.
Thank you.
Related
In the code example below, you will see white-space between the vertically flowing spanss. The white space is between each line box.
I want to start out by stating that this has nothing to do with gaps between inline-block boxes or even a result of half leading, which is added on top and bottom of an inline level box when calculating minimum line height.
From the CSS2.1 spec:
The height of the inline box encloses all glyphs and their
half-leading on each side and is thus exactly 'line-height'.
And:
The minimum height (of a line box) consists of a minimum height above the baseline and a minimum depth below it....
Notes:
background-color (as seen in the below example) covers the full line box
Despite that, there is still white-space between each line box
I am not asking for a solution to remove the gap. If I wanted to do that, I would just set display: inline-block on the span
Why is the gap there, with basis in the CSS2.1 specification. What part of the spec explains that spacing?
Example code:
// From CSS spec:
// The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'. Boxes of child elements do not influence this height.
span {
background-color: red;
line-height: 1;
}
<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
The background properties applies only to the content area and not the line box. In most of the cases the content area is defined by the height. As we can read in the specification:
The dimensions of the content area of a box — the content width and
content height — depend on several factors: whether the element
generating the box has the 'width' or 'height' property set, whether
the box contains text or other boxes, whether the box is a table, etc.
And here:
This property specifies the content height of boxes.
This property does not apply to non-replaced inline elements. See the
section on computing heights and margins for non-replaced inline
elements for the rules used instead.
And if check the above link we can read:
The 'height' property does not apply. The height of the content area
should be based on the font, but this specification does not specify
how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font.
Here is an illustration to better show youref:
The content area is defined by the browser and in some case it can be the em1 that you see in above figure but not necessarely.
In all the cases and whataver the line-height will be, the content area will only depend on the font properties. So the line-height define the height of the line box AND the content area height is defined by the font properties.
So the real question is: Why by default the line-height doesn't make the line box equal to the content-area?
If check we check the documentation we can see that the default value is set to normal and:
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.
Then
<number> (unitless)
The used value is this unitless <number> multiplied by the element's own font size.
In some cases, we will have the line box a bit bigger than the content area which explain the gap.1
Now why setting the line-height to 1 doesn't fix the issue?
Simply because you set the line-height of the spans and not the line-height of their container which is not enough. The line-height of the container is still the default one 1.2 which will be considered since it's bigger than 1. In other words, the biggest line-height will win.
Here is some illustration to better understand:
line-height of the body is 2 and only a bigger line-height for span will have an effect:
body {
line-height:2
}
span {
background-color: red;
line-height: 1;
animation:change linear infinite 2s alternate;
}
#keyframes change {
to {line-height:3}
}
<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
Setting line-height to body is enough as the span will inherit it:
body {
line-height:1; /*line-height is equal to content area*/
}
span {
background-color: red;
}
<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
1 Worth to note that in some cases and for some particular font, you may not see any gap and you won't even need to set line-height to 1 because the content area may be bigger enough to cover the line box since the calculation of both value are independent.
Here is some examples
span {
background-color: red;
}
div {
margin:5px;
}
<div><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
<div style="font-family:cursive"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
<div style="font-family:monospace"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
<div style="font-family:sans-serif"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
We have gaps only for the first and last example.
It's because the parent container's line height does not match the span's - line height affects the children so as span is inline, it is obeying the parent's line height
// From CSS spec:
// The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'. Boxes of child elements do not influence this height.
div {
line-height: 1;
}
span {
background-color: red;
line-height: 1;
}
<div>
<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
I m struggling to reduce the space between input value and its border.
Here is the codepen link https://codepen.io/Chandrikadesai/pen/xJpXXj
The cause is indeed the height you've set to the input. The fix would be to lower the height and adding top padding:
input:not([type]),
input[type=email]:not(.browser-default),
input[type=email]:not(.browser-default):focus:not([readonly]) {
padding-top:0.6em;
height: 2rem;
}
It looks like it's being controlled by the height on the input itself, which you have a CSS value set for on your Codepen link. That controls the total height of the input block, but you can see that if you make that too small, or short, the label begins to cross over with the input text.
You can adjust that label text height by setting a padding-top on the input element. Doing so will give a cushion between the label text and input text, and then you can control the overall input height to move that border.
width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
This CSS should give me the exact(100%) dimensions of the viewport. But it is apparently too large because it's causing an overflow on the page.
It is not padding, margin, or outline because I removed all of that.
note It also seems that it only "grows" bigger than the projected dimensions when I add two divs with these dimensions. (but it's always the case in jsfiddle)
http://jsfiddle.net/0psu7ys6/
Should I just consider it a bug and write a work around? Or am I missing something?
The viewport measurements are accurate. The problem lies in the fact that your div is an inline-block. The browser renders your inline-block element on a line box. The whitespace underneath your div comes from the baseline of this line box; it is the area where typographic descenders should go. This additional space, combined with your div, is what results in overflow.
If you remove the display: inline-block declaration so that your div is rendered as a block-level element, the scrollbars will go away and the div will fit the viewport exactly.
If you need this element to be an inline-block for some reason, setting vertical-align: top (or bottom or middle) seems to fix it.
There is another way to solve this
you should set the line-height of all the body in vh
So I was coding using Semantic-ui, and I have two toggle boxes (check boxes) next to each other in a flexbox container. When the window size is reduced, they wrap around so that one is on top of the other.
To get them to spread out a little, I added both right and bottom padding of around 5px. However I noticed a strange behaviour. Padding would cause the boxes to move apart horizontally, but when stacked vertically there was no space between them, even though there was bottom padding on each box.
Further investigation showed that the box-sizing property of the check boxes was set to border-box. After reading up, I found that the border-box box model calculates the width and height to include the padding and the border.
The checkboxes have a height of 1.5rem assigned.
My question is as follows. As is my understanding, padding shouldn't change the size of the element when using border-box. However this only seems to be true if definite dimensions are set as shown in the linked jsfiddle. Height is set, so the bottom padding isn't added on as an extra. But width isn't and right padding has an effect on the visible width of the divs.
Why is this the case? Surely padding should have no effect on the size of the element (unless set to something ridiculous, larger than the element itself), irrespective on whether I've defined a definite width or left it to be calculated?
JSFiddle: http://jsfiddle.net/Astridax/8cd48emn/
Please try and toggle the paddings using dev tools to see what I mean.
As is my understanding, padding shouldn't change the size of the element when using border-box.
This is where you're confused. Here's what the spec has to say on this subject: http://www.w3.org/TR/css3-ui/#box-sizing0
border-box
The specified width and height (and respective min/max
properties) on this element determine the border box of the element.
That is, any padding or border specified on the element is laid out
and drawn inside this specified width and height. The content width
and height are calculated by subtracting the border and padding widths
of the respective sides from the specified ‘width’ and ‘height’
properties. As the content width and height cannot be negative
([CSS21], section 10.2), this computation is floored at 0.
The actual effect of setting box-sizing to border-box is that specified widths will be said to include the border and the padding. The spec says nothing about unspecified widths, which are therefore treated as normal - as wide as they need to be to incorporate both the content and the padding and the border.
Edit:
What you're implying should happen is actually impossible to do, for the following reason. Imagine you have content in a div such that the auto width of the content alone would be 500px exactly. Then throw a 20px padding around that.
#myDiv {
padding: 20px;
width: auto;
}
No problem yet - you have a 540px wide div with the box-sizing at content-box by default.
Okay, so lets change the box-sizing to border-box.
#myDiv {
box-sizing: border-box;
padding: 20px;
width: auto;
}
What you're suggesting should happen is that the padding should now be ignored. So we have a div with 500px worth of content, we're going to now include the padding within that 500px instead of extending the width of the div. But wait - now the content box has shrunk to 460px to allow for the padding and the overall size of the box is 500px. But wait, we're not supposed to be accounting for the padding when calculating the width, so we'd better render the div at 460px right?
You see the problem? You could go on infinitely like this.
I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.