Is there a way to have multiple line heights in an unordered list? See the example below, the normal li's have a line height of 25px, but as soon as the sentence gets too long it will split in the same line height as defined before.
http://i46.tinypic.com/w1pdhi.jpg
I would like to have a line height of 16px once the sentence gets too long, without having to give an extra CSS class to the li.
Thanks in advance!
give the same normal line-height to every list-item and apply a margin-bottom to them to create room between each other
Jsbin example
You cannot make the line height depend dynamically on the rendering of a li element on one line vs. several lines. You could to mark the multiline li elements with a class, but being multiline should normally depend dynamically on the available width, instead of being specified statically.
On the other hand, I think that what you are really looking for is a way of setting the vertical spacing between list items. For this, you would simply set vertical margins or padding on them, using a line-height setting that is suitable for the multiline items.
Related
This has plagued me for so long, and I've only ever found solutions that reduce the issue, rather than eliminating them. Three divs of 33% width (so technically, not even 100% combined width) look just fine on my screen, but when zoomed in, the left-most div falls to the next line. Why is this?
Mind you, this is after eliminating white space in code. I use the > selector in CSS to set the font size of the containing div (that holds the other three) to zero, which achieves the same results as the uglier, less readable solutions of putting things on one line, or using HTML comments.
I shouldn't need to provide any example code. It's an issue in any set of inline-block divs set to percentage widths inside a containing div.
It is happening just because of spaces between inline-block divs...
like Code
On above code browser counts a space between and
So add css property to parent
.parent {
font-size:0px;
}
See difference between this fiddles
Your Problem http://jsfiddle.net/BS72X/1/
Nd here solution http://jsfiddle.net/BS72X/
Hope this helps you..
I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below.
I know it's a behavior of Line-height. but just curious if there is any good solution for this.
This is just en example to what I'm asking.
Jsfiddle: http://jsfiddle.net/jitendravyas/V3eWV/
You can use negative margins for this, although there is something to keep in mind:
line-height is a funny thing. According to CSS2.1 it doesn't specify the line-height but the minimum height of line-blocks:
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. We call that imaginary box a "strut." (The name is inspired by TeX.).
A line box is defined in 9.4.2 Inline formatting contexts:
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
This doesn't change in CSS3 very much, at least if you don't change the line-stacking. However, there is no property which targets your problem directly: you can't change the line-height of the ::first-line, it will always get applied.
That said, use negative margins for the time being. Even better, wrap your elements in a generic container. By using :first-child and :last-child you can add as many elements as you like.
Example
<div>
<h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>
<h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>
</div>
body {padding:30px;background:yellow;border:1px solid red;margin:0}
div{background:red;margin:0;padding:0;border:1px solid green;}
h1{line-height:2em;}
div > h1:first-child{
margin-top:-.25em;
}
div > h1:last-child{
margin-bottom:-.25em;
}
How can I group two divs inside a span (one below other and the div contains text and has a fixed width) and display multiple span like this in fixed width td tag. I am able to do so, but my span are overlapping. If the space in a line is full then the next span should come in next line.
You need to correct your markup.
You are not allowed to place block-level Elements (like div) into inline elements (like span). Doing so will make your markup invalid and mess with the layout, since inline elements have restriction regarding width and margin.
Either declare display:block or display:inline-block on your spans, or even better convert them to divs. This should most likely fix your issue.
Whenever i use a large line-height like 1.6em it always adds a margin in the very top of the text which i don't want.
Example: http://jsfiddle.net/EstpJ/1/
i want the text to be sharply lined with the borders and not have any kind of top or bottom margin.
How to fix that?
That's exactly what line-height is, it's a manual way to set the height of a line of text for the purposes of wrapping text and such. The actual visible size is determined by the font-size and to a lesser extend by the font-family. The average line-height for normal text/font is around 1.2em. Anything larger than that will cause visible letterboxing, which is exactly what you are describing. Using a smaller value will cause successive lines to overlap each other.
The only way to fix your exact example is introduce more markup to determine line numbers so that you can style the first/last line differently.
You could maybe slightly alter your markup (I prefer wrapping <p> tags around lines of text) and use a negative top margin?
As Matthew said, this is what lineheight does.
You could try to set the line height on an inner div (inside the one with borders), and counteract the top and bottom effect by also setting a negative top and bottom margin. But it's likely that the negative margin won't work in all browsers.
I have two <div>s inside a parent <div>. Both the inner ones are styled with no padding, border or margin and as width:50%; display:inline-block;. The outer <div> also has no padding, etc. Firebug shows the outer <div> to be of 1240px width, and each inner one to be 620px. So why do they appear one below the other and not side-by-side? If i lower their width to 618px, it works. Huh?
display:inline-block is inconvenient in the way that it takes in consideration mark-up whitespace when drawing the elements, AFAIK. Try setting font-size:0 to the parent element if it doesn't have any other text, and set the desired font-size for the child elements.
P.S., first try eliminating white-space in the mark-up between the elements, to see if that corrects the issue.
It sounds like a fairly simple solution, if you have two blocks, A and B and they are the exact same size and you are looking at them straight on and they are lined up perfectly you will only see one block.
You're trying to make something display that doesn't fit inside of the container. You've already solved your problem size the container up or the contents down mildly to fit them together.