It seems that all fonts have some sort of embedded padding or margin. By setting:
margin: 0px;
padding: 0px;
You never get what you want. Does anybody know why this is?
It sounds like the issue you are having is not with the CSS but the font itself. Most fonts define a baseline, x-height and line-height out-of-the-box. Your specific issue is likely with the font's leading, the space between lines. Sometimes these values can be wildly inconsistent. If you are really trying to get a specific font to line up correctly, I would recommend taking a look at FontLab and editing the glyphs/baseline/line-height for the specific font you are working with.
You can also look at a web-safe version of the font. These types of fonts usually have been specifically spaced to render best on the web. This isn't always the case, but it might get you the results you are looking for. Check out Google's library of web fonts here.
Update
This answer has received enough attention that I decided to add the first comment below to the answer and expound on it.
Browser Reset: Every browser will set default states for many of the reserved HTML tags like a and strong. There are other things defined by default including fonts, line-heights, weights and sizes. This could have an affect on the rendering of a font. Generally this is localized to specific browsers. So, by using a CSS reset, you can eliminate default rendering issues in browsers. Eric Meyers Reset is a good reset, but there are definitely others. Try using different ones to see which works best for you.
However, CSS resets work by targeting all browsers and setting them to all be the same. Some people prefer to use something that, instead, targets only the issues with each browser. That is were Normalize will be better.
There are also issues that a CSS reset will not fix. Such as font aliasing (making the fonts seem smooth rather than jagged). Since some browsers and operating systems do not add anti-aliasing to fonts, you will also see glyph width differences. This, unfortunately, is unavoidable in most cases. Some people go the route of using a flash font replacement tool like Cufon or Sifr. This too has it's own list of issues (such as the FOUC).
Another Update
One other issue that is still out there is the problem with kerning, or the space between glyphs. There is a CSS property letter-spacing that will allow you to do a global kern on a block of text, but it lacks the ability to target individual glyphs like Photoshop or InDesign. The kerning is also based on whole-pixels, so you are limited by what you can achieve. It also has issues with IE and is not as reliable as one would hope. There is a javascript called kerningjs that is pretty decent but it, too, is whole-pixel based and therefore not as accurate as rasterized text.
On the whole, fonts on the web have gotten better over the past few years. Sadly, we are still dealing with issues from the past, when fonts were only intended to be printed or rasterized. There is hope on the horizon for us font enthusiasts, though. As #allcaps said, the CSS3 specification for linebox is out there, so it's only a matter of time until it is widely accepted!
The reasons of this pecularity of the computer fonts are mostly historical. In the past, fonts were the sets of small metal blocks with one character on each, and the height of these blocks had to be enough to contain all the elements of any character, including descendants, ascendants and diacritical marks. The typographic tradition has defined the font size as the height of such metal blocks. That's why almost all actual characters are usually much smaller visually than the font size set for the text and there is some white space above and below them.
Here is a good article explaining the historical roots of the main typographic measurements: http://www.dev-archive.net/articles/typograph1-en.html#Ch22
x ov gjqpy bdfhklt CAPS ÂÊÁËÈ
A glyph is designed on a two dimensional canvas. For the latin writing system the height of this canvas is consistent and width may vary. Glyphs are placed on a baseline. x is on the baseline and the top of x defines x-height. Round and pointy shapes appear smaller so are optically corrected. Descenders extend below the baseline. Ascenders, capitals go above x-height. Browsers align text with different fonts (in the same paragraph) by baseline.
So why is the build in margin? Glyphs need whitespace around to be aligned to each other.
What can we do to influence these margins?
Choose your fonts wisely.
Specify line-height p { line-height:0.5EM;}.
Baseline shift .shift { top:-.5em; position:relative; }
And wait for CSS3 module: line.
General advice: do not adjust a font yourself unless you are absolutely sure what you are doing. One of the many things you'll encounter is hinting. Windows needs hinted fonts and hinting is hard to get right. Also the way fonts are loaded (#font-face) will load a local copy if it exists. You can disable local fonts by a hack. Your mileage may vary.
you can use line-height and letter-spacing padding/margin in fonts...
otherwise use custom css for each heading........
/*use line-height*/
.font{
line-height: 1px;
letter-spacing: 1px;
}
or use custom css......
h1{margin:1px 0;}
h2{margin:1px 0;}
h3{margin:1px 0;}
h4{margin:1px 0;}
using these css before use reset css .......
The "padding" at the top and bottom of fonts is essentially reserved space for diacritics (https://en.wikipedia.org/wiki/Diacritic). Some scripts stack multiple diacritics on some letters, including capitals (for example, Vietnamese https://en.wikipedia.org/wiki/Vietnamese_alphabet) so a font designer that forgets to reserve some place for them won't be able to extend his font later. Also, horizontal scripts require some separation (leading) between lines to be readable.
Only very specific glyphs like box drawing elements extend to the limits of a glyph box
http://www.unicode.org/charts/PDF/U2500.pdf
That's also why the "padding" is built-in each glyph. If it was an external property it would not be possible to differentiate between glyphs intended to be jointive and glyphs that need some separation (in other words the amount of padding is a glyph property no a whole-font property).
The following example requires a good font with decent Unicode coverage (http://dejavu-fonts.org/ works)
Jointive box drawing elements
↓
┃ÇŖŞ
┃ẤỄǛȰ┃U ← You really need to include the "padding" to align with box drawings
↑
Latin capitals with multiple diacritics (really crowded)
Lastly fonts stem from very old technology (movable type), and the conventions used to describe them still refer to fifteenth century habits, which makes them quite un-obvious to laymen.
(See also http://www.webfonts.info/node/330 for info on complications added by computer font formats)
fonts opentype text-rendering
If you want use space between lines in a paragraph, you can use:
line-height: 3px; /*3px is an example*/
Or, if you use space between letters, you can use:
letter-spacing: -2px;
Its not a problem with the font as such. Yes, as #matthew said, the font design itself has some character built in. For example, check out difference between say "Segoe" family and "Verdana" family. You will keep on resetting your css if you need to use both. One style just won't work.
The larger part of the problem lies in the way different browsers render even on the same OS. Heck, even different versions of IE render differently. ClearType, Anti-aliasing, font smoothing, software rendering instead of GPU rendering, rendering engine itself, etc. etc. all play their role to make sure you don't end up with pixel-perfect design across all browsers across all OSs.
ClearType tries to align with pixel-grid causing another set of problems with subtle differences in height.
This link is very old, but still very relevant: http://www.joelonsoftware.com/items/2007/06/12.html
See Also: http://www.codinghorror.com/blog/2007/06/whats-wrong-with-apples-font-rendering.html
See Also: https://webmasters.stackexchange.com/questions/9972/how-can-i-make-fonts-render-the-same-way-across-different-web-browsers
See Also: CSS font differences between browsers
Your best bet would be to keep tinkering with css until you get close enough.
The native margins for text elements are as follows (at least in Firefox and Chrome):
Working Example
p{margin:16px 0;}
h1{margin:21px 0;}
h2{margin:19px 0;}
h3{margin:18px 0;}
h4{margin:21px 0;}
h5{margin:22px 0;}
h5{margin:24px 0;}
To remove them you'll have to re-set the margin like so:
p, h1, h2, h3, h4, h5, h6{margin:0;}
After looking at the html source of a html document found out that after the normal margin/padding added by all the browsers, chrome by default adds its own webkit's margin/padding properties.
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
Solution is instead of normal
*{
margin:0;
padding:0;
}
Append the style with
*{
margin:0;
padding:0;
-webkit-margin-before:0;
-webkit-margin-after:0;
}
As -webkit-margin-start and -webkit-margin-end are already set to 0px, there is no use of setting them in here.
Tell me if that works! :)
I think is kerning what you intend to describe
take a look to this library
http://kerningjs.com/
CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and
scale your web type with real CSS rules, automatically.
Print designers have had it easy for way too long. This is 2012; the
web has been around for over two decades, yet web designers don’t get
full control over their typography? Forget that, use Kerning.js!
it's free
The fonts itself has problems it seems. CSS can be used as shown above to solve the problem but still it should be said that it is better in your scenario to fix up the font files itself.
Check out this page as it will give you better insight on how to edit a font:
http://mashable.com/2011/11/17/free-font-creation-tools/
Here is my Opinion
The margin is the distance from each side to the neighboring element and the margin property can be set for the top, left, right and bottom of an element
padding is the distance between the border of an HTML element and the content within it.
But in your case you dont really need these both you , as you are interested in font spacing , there is one css property called letter-spacing
The letter-spacing property increases or decreases the space between characters in a text
Try
h2 {letter-spacing:-3px}
The letter-spacing property is supported in all major browsers.
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
I often run into the same issue, especially when trying to get text to top-align with something beside it that isn't text, such as an image.
Here's a technique I've had some success with. Select a portion of the text so that a colored background appears behind it. The top of the selection highlight will reveal what the font considers the "top" and "bottom" of the letter. Take screenshots of the font at various sizes and across multiple browsers. Zoom in on the screen capture in Photoshop and count the number of pixels from what you believe "should" be the top and the actual top. Calculate the percentage that number of pixels represents within the entire selection height.
Then set a negative top margin on the text in ems that is equal to the percentage of the "overflow." So if the text should be 10px tall and it's actually 12px tall, then give it a negative top margin of -0.2em.
Then wherever you assign the font-family that's causing the problem, also include this negative top margin as well. You can use the same technique for bottom and side overflow as well, but I typically find it's the top that causes the biggest headaches.
What's about resetting the margin and padding value to zero in all
*{
margin: 0;
padding: 0;
}
I have run into this pain a couple of times when using some webfonts for icons and gained better control by placing them in an absolute positioned container.
HTML
<div class="relative">
<div class="webfont">✔</div>
</div>
CSS
.relative { position:relative; }
.webfont { position: absolute;
top: -5px;
left: -5px; /* easier control with these values */
}
This felt like a better way to control things cross browser, rather than say, using positive/negative margins and paddings.
Giving the text block a container and class we have much more cleaner ability to tweak it's position cross browser. ( IMO ).
Might be something there.
Cheers,
Rob
You can do it with line-height
I know it's not too common in HTML5, and is more HTML4.1, but...
<font style="line-height: 5px;">
and if it's really that important:
<font style="padding: 5px;">L</font>
<font style="padding: 5px;">o/font>
<font style="padding: 5px;">r</font>
<font style="padding: 5px;">e</font>
<font style="padding: 5px;">m</font>
Related
The following example pretty much sums it up.
This code:
<h1 style="background-color:#F2D680">
K
</h1>
<h1 style="background-color:#BAC9A9">
T
</h1>
Produces:
As you can see, the letter K is displaced (its leftmost edge does not align with T's leftmost edge)
Are there any CSS tricks to conquer such misalignment?
This is caused by the design of the glyphs. Many glyphs have some empty space on the left or on the right of the visible symbol. This spacing is outside the scope of CSS. You cannot use CSS to left-align the visible symbols in the glyphs, because CSS cannot “get inside a glyph”.
However, you can adjust spacing with CSS in different ways, possibly undoing the effects of the space in the glyphs. This would need to be done on the basis of inspecting the glyphs in the font being used, and naturally when your font suggestion is not honored for some reason (e.g. the user’s system has not got the font), strange effects may be caused.
So this would be unreliable tuning, but sometimes it might suffice. Example:
h1 { font: 96pt Arial }
<h1 style="background-color:#F2D680; text-indent: -0.04em">
K
</h1>
<h1 style="background-color:#BAC9A9">
T
</h1>
I think that the cause is the font.
To my mind, the only solution is to change of font (one without this problem)...
(Or to use CSS to playing with margins in each case)
That is caused by the kerning of the font. It vary from font to font how much the kerning (space between each character) will be.
You can try to use text-indent to make it align as you like. It also allows using negative values
Example
text-indent: -5px;
It's the nature of fonts. Every glyph has white in front and behind each shape. Otherwise all shapes would stick together. It is important to realise that the white is as important to the shape of the glyph as the actual shape itself. There are even glyphs with negative offset and a lot of time and devotion goes into designing these offsets.
The reason that not all white is equal is to optically compensate. Yes, you read it well. The font designer added white to make the glyphs look evenly spaced. To compensate the black from the stem of the K to the left gap under the T.
So putting two glyphs on top of each other in a large size is an exceptional use case. Normally things work out okay, but if it bothers you, or your client, just correct the position to your (clients) liking and be done with it.
Answer: margin-left: -4px;
Just edit the font using FontCreator. I think, this is the easiest way. ;)
Also, you can change style of capital letter using :first-letter.
Try using this
h1{
float: left;
}
This might be really picky, but a person in QA pointed out to me that sub-bullets are tiny when using Verdana in IE: http://jsbin.com/IQEmEq/2
The first list is using the default browser style, the second list is using Verdana. Notice the sub-bullet in the first list has a normal size, i.e. it is the same size as the other bullets in the list. But in the second list the sub-bullet is smaller than the other bullets.
Chrome and Firefox seem to render all the bullets the same size regardless of font, but IE for some reason doesn't.
How can I "fix" this?
This seems to be something they introduced in IE 9: the bullets may depend on the font. As far as I can see, the sub-bullets are the same size in both lists, but in the Verdana list, they look smaller, partly because the primary bullets are big, partly because Verdana test is big.
I guess Microsoft regards this as a “fix” to something. It seems that they use U+25E6 WHITE BULLET as the default secondary bullet, and it is oddly small in Verdana (when compared to other characters). Previously, I suppose, IE used bullets taken from a specific font, no matter what had been set in CSS.
So in a sense, it’s design flaw in the Verdana font.
One way (though not the most elegant way) to get list bullets you want is to include them into document content, without using ul markup. You can get a basic bullet using • and a secondary bullet (ring) using ∘ if you want a bigger circle in Verdana. (U+2218 is RING OPERATOR, so it’s a somewhat illogical choice.)
In fact they introduced the behavior in IE8 already. For me it's just the contrary: when the LI's font is Arial, the bullets are smaller, even rectangular, and with Verdana they're of regular size.
If you want to fix lists in many documents you can use either css or javascript that will fix the lists when the page loads.
Alright this is probably a newbie question but it is very much frustrating me. I clearly say in the style tags that the top blue bar needs to be snug against the top and the two side panels need to be snug against the sides.
Yet for some reason it has taken the liberty of inserting a blank white space around my html.
Here is the link: http://popularn.com/nate/error.html
See that white space on the left and at the top?
Even when I say top:0% and left:0%, it still doesn't work. It's like it's laughing at me and I've had enough. It's like it is starting the document at top:2% and left:2% and there's nothing I can do...
remove margin from the body, set top left to 0, and off course don't forget the position attribute
html,body{padding:0; margin:0;}
#someElement{position: absolute; top:0; left:0}
also -
putting position:absolute; top:0; left:0; to the body is like doing nothing
and the position of the #top_menu should be position: fixed and not fixes which has no meaning
Browsers have a set of default styles which are known as 'User-agent styles'. These are a generic set of CSS rules that it applies to elements. You know when you put a H1 in a page, and it appears big, and in bold? These are those styles.
The base elements in your pages are all styled with these UA rules. Body, HTML, div, etc - they all have a small amount of padding on them, which is where this is coming from.
Consequently, it's good practice to always use a CSS reset, when you are developing beyond basic styles. There's a couple of good ones I'd recommend. As CSS is hierarchical (hence cascading!) you need to include resets first.
Firstly is Eric Meyer's CSS reset. This applies generally to everything, and is invisible for most purposes. You include the file, everything gets reset to base.
Secondly is Yahoo UI 3 (YUI) reset, which takes a slightly different approach. They let you selectively apply a reset to different areas of a page by including a class. This is useful for some things, but for almost every small/medium sized project I'd recommend Eric's reset linked above - but it's useful for comparison and learning.
Instead of trying to tune out inconsistencies as you go along - using a CSS reset will give you a baseline for all elements which is the same on every browser. Believe me - you want this. When you get further into html, forms for example or fun stuff like that, then this kind of thing is an absolute life saver.
Hope that helps!
You need to reset the default padding and margin on any browser. I usually use this:
*{padding:0;margin:0;}
I'm remaking an old website with html and CSS, having never made a website with "old-style" mark-up I have no idea what the size=+x relates to in CSS, is it pixels or what? Is there a way of replicating this in css or do i have to specify the size exactly?
In short, how do i add x pixels to something i dont know the size of?
For my particular example here is the mark-up:
<H1 ALIGN=CENTER>
<B><FONT color="red" SIZE=+4>PHONE BOOK</FONT></B>
</H1></CENTER>
This dirty old value is equivalent to this css
.item{
font-size: xxx-large;
}
That's if you view it in webkit.
In firefox, it's about 48px.
Here's the old plus and minus tags in action
Here's the W3C's details of the modern equivalents
The old font sizes are set relative to the browsers current default font-size.
It's not the sort of thing you want to leave up to chance, if you want your site to look how it was designed.
Want my opinion, dump it, and use a value of em or px instead.
For the good of your sanity, don't sweat too much over matching these crummy old values, do it by sight, or if you're really worried, do pixel comparisons of screen-grabs.
in short the tag has 7 sizes for text: 1-7.
the default was always 3 when used size=+1 it means make it a size larger than 3 (same as size=4).
it was used so different web browsers will show the page correctlly (their sizes are apparentlly different size 3 on explorer wasnt the same on firefox etc)
in css just define a font and a decent letter size and be done with it.
for further reading: http://www.jonstorm.com/html/font.htm
Much of this depends on the base font size used on the page, as well as how those font sizes are defined in the stylesheet. The best way to determine the actual size use to use Firebug. Inspect the element and open the "Computed" tab of the right. It will tell you the font size in pixels.
I've noticed that some browsers have trouble with margins, especially when an element is floated. For example, this website I'm doing looks fine in Firefox, but IE7 screws up the margins completely it seems. I also testet it on several Linux browsers as well and some of the make similar mistakes.
The site is
http://w3box.com/mat
This looks fine in FF3.0 as far as I can tell. Haven't seen it in FF2 yet, or IE6.
Why does this happen? Is it because I've got floated DIVs with specified margins?
Are there some things I should avoid or should have done differently?
Edit: So it looks like my tags was the source of the screwup.
I'd placed images in the that was not defined in the CSS and that had floats on them, combined with margins. These screwed up everything and I have to redo these.
Also, some stuff happened when I used XHTML Strict instead :)
Thanx everyone! I'll try to fix this on my own :)
I disagree with using a library if you want to learn about CSS part of the curve unfortunately is learning about the ways different browsers react to CSS. I wouldn't even suggest using a reset stylesheet. If you are going to be doing this a lot learn how CSS works. If you use a library or a set stylesheet which you don't understand how will you fix it when it breaks.
Marging are not bad, but IE has some troubles with the margins of float elements. While there are many recipes for fixing, I believe that in your case you may use absolute positioning instead of float+margins (you don't really need "float" behavior when the image is wrapped by text)
There is nothing wrong with using margins.
Old versions of IE have one bug and that alone isn't nearly enough of a reason to avoid using one of the core layout features of CSS. Specifically, this bug occurs in IE when you float an object and give it a margin in the same direction, e.g.:
.whatever {
float: right;
margin-right: 5px;
}
You can deal with this a number of ways, depending on your layout. One way would be to add another div around your box and use padding on that to replicate the same space a margin would.
I'd suggest using some form of CSS Framework (Blueprint CSS, 960 Grid, etc) as they have a number of margin, padding and other common HTML element resets. You should find cross browser development is easier using a framework.
Different browsers have different ways to handle box model. Most of the time the sites which are displayed well in FF, Chrome or IE8 can have problems in IE6 and 7.
To workaround this problem you can try to set all the default margin and padding to 0 (and adjust them as needed on specific elements):
*{ margin:0px; padding: 0px; } //Simplest rule...
To see more on CSS reset you can look at: http://meyerweb.com/eric/tools/css/reset/
And then apply different styles for IE7 and 6 with conditional comments.
As mentioned on other answers it's to do with IE's interpretation of the box model.
Whenever anything is floated IE tends to double the margins specified. This can be fixed with an extra stylesheet for IE using conditional comments.
See also: http://www.positioniseverything.net/explorer/doubled-margin.html