This question already has answers here:
font-size vs line-height vs actual height
(2 answers)
Closed 4 years ago.
Someone probably had the same issue, but can't find anything. It seems like line-height css doesn't match the actual height of the line
Here is the text css properties:
.description{
line-height:17px;
font-size:14px;
height:85px;
overflow:hidden;
}
so normally, since 17px * 5 = 85px, we should only see 5 lines, but as you can see on the pic, the top of the next line is showing up. It behave like if line-height is about 16.7px and not 17px. Is there a way to correct that?
I try with different height (102px, 170px, etc..) , and the higher the box is, bigger the gap is (at 255px, we can see half of the next line )
Update: A comparison of my result with 255px box (issue) and the expected result (like jsfiddle)
js fiddle : https://jsfiddle.net/eo7pkzqt/28/
Refer this
See line-he is depended on font-size,font-family....etc so variation comes using line-height
Related
This question already has answers here:
CSS color vs. background-color vs. background?
(6 answers)
Position a CSS background image x pixels from the right?
(21 answers)
Closed 4 years ago.
I was trying to remember something I saw on YouTube. The guy was positioning a background image doing something like this:
background-image: url(img/someimg.jpg) 200px 300px;
I think the 200px positions it on the x-axis while the other is the y-axis. I'm not sure & this doesn't work but it was very similar to this. Can I get some help?
There are many background properties like background-image:, background-position:and all of them can be reduced to one property background:. This is useful to save a few bytes and it's faster to write. CSS works exactly the same.
Syntax looks like this:
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Check this LINK for more informations
This question already has answers here:
Add outward curving border to elements like this: ◝◟___◞◜
(3 answers)
Closed 7 years ago.
I post this thread, because I need help for something please. I would like to create negative border radius for my navigation links (like this): http://prntscr.com/9vi0b5
As you can see, there is normal border radius at the top, but at the bottom, we have negative border radius. On the image above, two images are used to make the effect, but I want something with CSS only please. Something that I can edit when I want, you know?
Thank you.
I do not think this is possible.
But a solution could be to use :before and :after to build this effect.
Something like
:before {
border-bottom-right-radius: 5px;
}
:after {
border-bottom-right-radius: 5px;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
This is going to be one of those things where a CSS guy would slap his forehead and go "you've got to be kidding me", and for that I apologize. I also apologize for not being able to find a similar question on Stackoverflow when, I'm quite sure, there's got to be one.
Take a look at this JSfiddle: https://jsfiddle.net/kwende/fqxna79a/
You'll notice two tags in there:
<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
What I'm weirded out by is if you enter ENTER (in Chrome and Edge) and therefore create a line-break between the first and second divs, the green and red blocks are no longer on the same line. But no CSS changed. No markup changed. I do not understand why (and it's part of my understanding this shouldn't matter) that a newline break within the text document itself would create a new line in the rendering of the markup. But it obviously does.
Example:
Is where I haven't entered ENTER, and
Update: it appears as though this question has been answered before. Here is a good link to follow to understand what's going on.
It's not the actual newline that is the problem, but the fact that you enter any white space between the two div elements.
Because you made them inline-block, this makes them behave like inline elements, which are put next to each other if there is no spacing.
However, when you insert white space between them, the layout algorithm sees that 20% + white space + 80% is more than 100%, thus putting the second div on a new line.
You can verify this behaviour by making the second div 79%, while adding the space (or newline). In that case, the div elements will still be next to each other.
Another one solution instead of 79% use on top element font-size equal to 0, here is example of that one https://jsfiddle.net/fqxna79a/2/
body{
font-size: 0;
}
#left, #right {
font-size: 16px;
}
I am working on a responsive grid system for a project. The grid is made up of blocks which are floated left and have a width of 25%.
Inside these block are are images which are set to either 100% *height/width* or 50% *height/width*.
All the images within the blocks a butted up next to each other, and all the blocks are butted up next to each other so it looks like a seamless grid of images.
The issue I'm getting is at certain browser sizes or when you resize the browser you get a little 1px gap between certain blocks.
An example can be seen here:
http://dahliacreative.com/responsivegrid/
I think it may be down to the blocks floating as if you take the float off all seems fine.
I tried using display: inline-block etc, but couldn't get anything working!
Does anyone have an idea to fix this ?
This is due to using full round percentages such as 50%, when you get to certain widths and heights (e.g 561px * 393px) then those won't divide into 50% evenly hence this remaining 1px gap.
Have a look at twitter bootstrap CSS to see the percentages done to 6 decimal points to avoid this issue.
I fix it by adding css class to last column, css for this class
.your_class_for_last_column { float: left !important;}
/* TO FIX 1px Foundation 5 bug fix*/
You can use the new css3 with colum gap and column count.
column-count:
column-gap:
Chris made a really good example with images, which is related to yours.
You can do almost the same thing with li or table or so on elements
Make sure to use prefix and doesn't work in IE less than 10
http://css-tricks.com/seamless-responsive-photo-grid/
Here's my doubt. I've got a parent div with a child which is a span. Both have line-height set to 0. The span has font-size set to many many pixels (198px).
The problem: the div gets a height. But, from what, if it should come from the spans line-height, which is 0?
I set up a tinkerbin. Check it out if if you're interested.
http://tinkerbin.com/0oCT7PRf
This happens at least in firefox and chrome, so this is almost definitely a standardized behavior.
Note!
This is a css behavior doubt. I'm interested in knowing what's happening, not on "fixing" an "issue".
Thanks in advance.
The text still has a size; the letter 'F' is expanding the div to fit.
Update from the spec:
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.
http://www.w3.org/TR/CSS21/visudet.html#line-height
So the height of the box really is coming from the font-size, as the line-height is only defined as a minimum of 0, but not explicitly 0.
Yes, the is taking the height of its inner element. If you want it to correctly take its defined height/line height, you have to set it to behave as a block element ( display:block;)
Also, when hiding elements on IE using line height / height :0, IE won't collapse the element unless font-size is set to 0 as well.
The answer I've comeup with:
First facts backed by the spec:
When you have a line height greater than the font-size - what you usually see - it's pretty easy. Take the line height, subtract the font-size, divide it by 2. Apply the result to both the top and the bottom of the "glyphs box", and that's it. So if your font-size is 14px, and your line height 16px:
16px - 14px = 2px
2px / 2 = 1px
Add 1px above the "glyphs box", add 1px below it. The box gets a height of 16px, and that as expected becomes the height of the parent container (assuming, as in the case, that there's only one line-box in it).
When the line-height is less than the font-size (our case) the thing gets trickier. Lets use the same formula for a font-size of 54px and a line-height of 0.
0-154px = -154px (the spec allows a negative value here so we're alright)
-154px / 2 = -77px
So, our font has a size of 154px... and here's something else you need to know. A font has both a distance from the baseline to it's top and from the baseline to it's bottom. Pretty simple. The spec calls the first one height(A) and the second one depth(D). So A+D = distance from top to bottom.
Now here's what I think is happening in the case I presented in the question. This is what I concluded from "my fiddling" and not from the spec (since I couldn't find it there).
Let's continue with our formula.
We got -77px from dividing the result of the difference between the line-height and the font-size.
Our font-size is 154px.
Now we've got to add -77px to the top, and -77px to the bottom. Adding a negative is subtracting - so we're in fact subtracting 77px.
This is easier explained with a drawing.
So yeah, that's where I believe the height is coming from. It's at least related to it.