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.
Related
If the CSS text-indent will only do the first line, is there anything "wrong" with using the blockquote with the attribute of text-indent: xxx; that way everything within the blockquote attribute will be indented? Or, maybe that is the "right way" and I just don't know it (new/learning HTML and CSS)
The way to indent all lines of text in a block or, really, a block as a whole is to set margin-left or padding-left on it. The choice between these properties is relevant if the block has a left border (the border appears between margin and padding) or if it has a background color or background image (the background extends to the padding but not the margin).
Using the blockquote element means in practice setting a 40px margin on the left and on the right and a 1em margin above and blow. In the 1990s, and even later, blockquote was often used for indentation, because CSS was not available. It’s a blunt instrument, and using it is frowned upon as a matter of principle.
The text-indent property allows you to indent the first line of text within an element. The amount you want the line indented by can be specified in a number of ways but is usually given in pixels or ems.
It can take a negative value, which means it can be used to push text off the browser window. You can see this technique used in this example, where the element uses a background image to represent the heading. The text has been moved far to the left, off the screen. (Background images are covered on pages 413-418.)
i'm having a rather unique problem with CSS and DIV with/without borders.
Now, when i use the DIV without any borders, there is a kind of automatic padding! when i add a border, the padding disappears.
Even when i use "margin:0;padding:0" it still doesn't clear off the padding.
does anyone have any ideas why it's behaving like this? As a result, i had to use a border with the same color as the page background, but now i have same problem with a set of 3 DIV that should be right next to each other and CANNOT have any borders at all.
HELP!
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.
If you take a look at this screenshot: http://img687.imageshack.us/img687/4350/photobenchmozillafirefo.png
You can see the text on the top right overflow the div. Eventhough I have placed vertical-align: top in there it still won't stick on the top. How do I make this text appear on the top?
It is at the top. Only the top for a font doesn't necessarily have to be the top visible pixel of a character. Trying to draw it even higher will force you to set the line height smaller than the font size, or set a negative margin. Both solutions may cause the text to be cut off on another computer and/or browser.
You should set line-heigth for the text.
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