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.
Related
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;
}
Kind of hard to put into words, so here's the jsFiddle showing it.
When hovering over one of the green blocks, I wanted its background to expand enough that it "touches" the contiguous rectangles (it overlaps their margins). However, when hovering over the last block of each line, the layout goes wild: the line below only shows one element, etc.
The cause seems to stem from the negative margin; since, if the margin for the "expanded" class is set to plain 0 instead of -5, this problem doesn't happen. But of course this would leave a space between blocks.
The size of the parent container doesn't seem to alter this. Note that for now I'm not particularly concerned about the fact that the expanded block isn't well centered and makes the others in its line wobble a bit, although it may be linked to the problem.
Change de padding of the extended into 10px
http://jsfiddle.net/TMXLz/4/
The only way I can see to do what you want is to position each of those blocks absolutely (position:absolute) into the place you want them. You're main issue here is that the changes you want to make to the box are going to cause them to encroach on each others space. So you either need to adjust all their spacing (using js) on each mouseover (which sucks). Or absolutely position the items into place (specific positioning style for each box) then you won't have an issue with them overlapping partially. Just be sure to increase the active ones z-index so its always 'over' the others.
This may be the output you are looking for
http://jsfiddle.net/TMXLz/5/
How would you change the vertical positon of text of a HREF? I would like to move the text down by 1 pixel AND STILL preserve the padding. I'm at a loss.
If you take a look at the following fiddle, http://jsfiddle.net/2vjbz/, the numbers is what I'm referring too.
The easiest fix is to change the top padding to one pixel more, and the bottom padding to one pixel less.
Alternatively if you don't want to change the padding for any specific reason, try setting the line-height to 2px higher.
Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.
I can achieve the same results with padding in the child, but it just makes no sense.
Testing in Safari/FF.
I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.
An example, showing the difference.
It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.
Sounds like margin collapsing which is natural behaviour. This is a good read:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
There are number of ways to get round margin collapsing issues. One way is to add a border
or 1px of padding around the elements so that the borders are no longer touching and so no
longer collapse.
Another way to stop margins collapsing is to change the position property of the
element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes
don't collapse. Also if you float a box it's margins no longer collapse. It's not always
appropriate to change the position properties of an element but in some situations if
you're having problems with unwanted margin collapsing, this may be an option.
Just looking at some CSS here, and I noticed:
.head{position:relative;overflow:hidden;margin:-30px 0 0 -25px;width:820px;padding:20px 25px 0 25px;background:url(/images/bkg.gif) 0 0 no-repeat;}
Why would you put -30 and -25px margins?
I started typing an answer, and then found a much better one here (Wayback Machine backup). Some salient points:
Negative margins:
are valid CSS
don't break page flow
have high levels of cross-browser compatibility (although if they break your link or floated image, then try adding position: relative; that should fix it)
Their effect on unfloated elements:
applying them to the top or left of an element "pulls" that element in the appropriate direction(s)
HOWEVER, applying them to the bottom or right of an element "pulls" immediately subsequent elements into them, making them overlap
Their effect on floated elements:
this is more complex and I can't summarise it better than the article. Have a play around in Firebug to get a feel for them.
There are some brilliant examples of negative margin use in that article (especially the 3-column layout! Magic. I've used a similar technique for page layout before.) The most common use for them I've found is just to move an element a small amount to correct its position, and to make one element overlap another for visual effect.
A lot of tricks and nice effects use negative margins:
Image Replacement Trick - when you want to use that particular font and you just can't tear away from it, image replacement is the trick. Uses negative margins to push out the regular font and replace it with the "picture" font.
Image Rollovers with borders - giving a negative margin to the image the same size in pixels as the border size will keep the image, and therefore the layout, from shifting on a rollover.
Center screen positioning - using negative margins the same dimension as the height and width of the object you want to center, you can center an object in the middle of the browser.
Negative margins can be helpful when you have other element "around" that you want to e.g. have a padding for all other elements. I use it very often, read here, why:
http://www.simplebits.com/notebook/2005/05/23/negative.html
Actually i think there is an use case where negative margins are the only right thing to do:
You want an part of a box to extend over the whole parent, even over the padding. So instead of removing the padding of the parent element an apply it to all children exept for your special case, you give your special case a negative margin. Also no haggling with positioning. Works great and is very readable.
Example: http://codepen.io/anon/pen/DpHvu