My basic CSS rule for font-size and line-height is pretty simple:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
}
When I create a paragraph that contains an <em> or a <strong> (or even some <code> which uses a different font-size than the <body>), I notice that these elements increase the line-height by a pixel or two.
This leads me to believe that most browsers take the largest inline element to display line-height. Is that right?
My goal is to make the line-height consistent, regardless of which elements are inline.
The only way I've found to make the line-height consistent is to define:
em, strong, code, etc {
line-height: 100%;
}
Is this the right way to go about this? Or am I being too much of a perfectionist?
Edit 1:
This also seems to work:
em, strong, code, etc {
line-height: 1;
}
Edit 2:
After playing with this for a few days, it doesn't appear that there is a reliable solution for keeping a consistent line-height. If anyone has any ideas, I'd certainly love to hear them.
Edit 3:
For my own future reference and from my own research, these tags should be considered with line-height: 1 as long as they are displayed inline along with other standard body text:
abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q,
samp, small, strong, sub, sup, tt, var
These elements are questionable:
a, bdo, img, span
The spec confirms what you thought, that browsers take the largest font for the line-height calculation. That means your only option (and the one the spec mentions) is to set the line height for ALL the inline boxes on lines you care about. You probably would not be happy with the results of selecting body * and setting the font size. So add some Divs with the same class around whatever blocks of text you want to look uniform, and there you go:
div.uniformlines * {
line-height: 100%;
font-size: 16px;
}
It seems best and most flexible to define body {line-height: 0} then define the line-height for major content areas with line-height: 1 or 1.5 or whatever. That allows you to control the other elements more dynamically and consistently.
For example, line-height can be really problematic for images or other grids that want to be aligned flush with each other, like a gallery-style. This is most often the case when images have anchor tags, which inherit the line-height of its parent. The spec allows for a "normal" value, but that seems to be a different standard per browser. 1 or 100% are also options, but "0" seems to basically make all browsers force the same standard, like a good CSS reset. Of course all text gets squished to one line with "0", that's why setting the line-height at the content areas is necessary.
Here's a codepen I put together to illustrate the point
This thread is already years old and things might have changed in the meantime, but the following (which i rediscovered on http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/ (archive)) works for me:
* {
vertical-align: bottom; }
It's quite surprising since vertical-align as such would seem unrelated to line-height; then again, this is CSS so you never know. The website quoted above in fact suggests
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative; }
which looks like a hack to me.
I think that's a pretty neat idea.
However, don't forget that if the bold/italic text is too large then you could impair readability by making all the lines really tall when only one needs to be. You may also want something to deal with superscript and subscript, if your example doesn't already take care of it.
I'm not seeing this behavior, but I'm using WebKit. Does the problem happen for you if you throw some bold tags into this example?
http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height
Related
First of all I want to tell you why I'm asking this question. I usually update projects that have been written poorly and without a reset. I want to improve the project's quality so it seems that applying a CSS reset is absolutely necessary.
I don't want to do a hard work of pixel perfect testing in every browser every time I change something and I don't want to completely rewrite all CSS.
So:
When I'm writing:
*{
margin:0;
padding:0;
border:0;
}
I know what trouble to expect: <p> will loose padding and <input>, <select>, etc. will loose padding and border. So I have to specify them manually.
This code is more difficult to understand:
*{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
And I'm completely confused with this:
body {
line-height: 1;
}
*{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
This sets all elements in the document to inherit font and font-size from parent elements by default unless specified otherwise, which can prevent user-agent stylesheets from applying font styles with less specific rules.
vertical-align: baseline; is another widespread rule to avoid user-agent rules which don't always apply this (I believe) expected default behaviour to all elements.
Here's a brief look at what this does: demo. In the demo, try setting a rule to middle rather than text-top.
body {
line-height: 1;
}
This is the same. If you're not familiar with line-height, it's quite simple. You may have dealt with it without realizing it: Sometimes it appears to be a margin issue when in fact, the line height of an element is exceeding what you expected. This often happens when you place a typeface into a design which has a very dissimilar x-height to other typefaces.
If you don't understand its function, throw some dummy text into a document and start playing with it. It's very useful (essential) for producing good typography in different situations.
It seems you're not clear on css attributes and how they effect elements. The better your understand this, the better you can utilize a reset. No reset really fits all for a few reasons. For example, you might not be using any elements where vertical-align may end up being mismatched. You may have rules in a large reset that apply to elements you don't even have.
As with anything in web design, if you don't understand it, hands on experience will teach you a lot.
Check out this fiddle with simple input control on a form:
http://jsfiddle.net/KXYHw/
Toggle reset and see how input font and font size changes.
I know what CSS Reset is, but recently I heard about this new thing called Normalize.css
What is the difference between the Normalize.css and Reset CSS?
What is the difference between normalizing CSS and resetting CSS?
Is it just a new buzz word for the CSS Reset?
I work on normalize.css.
The main differences are:
Normalize.css preserves useful defaults rather than "unstyling" everything. For example, elements like sup or sub "just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences.
Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS.
Normalize.css doesn't clutter your dev tools. A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings.
Normalize.css is more modular. The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website.
Normalize.css has better documentation. The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.
I've written in greater detail about this in an article about normalize.css
The major difference is that:
CSS resets aim to remove all built-in browser styling. Standard elements like H1-6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all. You're then supposed to add all decoration yourself.
Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You're then supposed to add only the difference in decoration your design needs.
If your design a) follows common conventions for typography et cetera, and b) Normalize.css works for your target audience, then using Normalize.CSS instead of a CSS reset will make your own CSS smaller and faster to write.
Normalize.css is mainly a set of styles, based on what its author thought would look good, and make it look consistent across browsers. Reset basically strips styling from elements so you have more control over the styling of everything.
I use both.
Some styles from Reset, some from Normalize.css. For example, from Normalize.css, there's a style to make sure all input elements have the same font, which doesn't occur (between text inputs and textareas). Reset has no such style, so inputs have different fonts, which is not normally wanted.
So bascially, using the two CSS files does a better job 'Equalizing' everything ;)
regards!
Well from its description it appears it tries to make the user agent's default style consistent across all browsers rather than stripping away all the default styling as a reset would.
Preserves useful defaults, unlike many CSS resets.
First reset.css is the worst library you can use, because it removes the standard structure of HTML and displays everything you write just as text, after assigning the values of margin padding and other attributes to 0. So for example you will find that <H1>, will be the same as <H6>.
On the other hand Normalize.css uses the standard structure and also fixes almost all the errors existing in it. For example it fixes the problem with showing a form from one browser to another. Normalize fixes this by modifying this features so your elements will be shown the same on all browsers.
resetting seems a necessity to meet custom design specifications, especially on complex, non-boilerplate type design projects. It sounds as though normalizing is a good way to proceed with purely web programming in mind, but oftentimes websites are a marriage between web programming and UI/UX design rules.
This question has been answered already several times, I'll short summary for each of them, an example and insights as of September 2019:
Normalize.css - as the name suggests, it normalizes styles in the browsers for their user agents, i.e. makes them the same across all browsers due to the reason by default they're slightly different.
Example: <h1> tag inside <section> by default Google Chrome will make smaller than the "expected" size of <h1> tag. Microsoft Edge on the other hand is making the "expected" size of <h1> tag. Normalize.css will make it consistent.
Current status: the npm repository shows that normalize.css package has currently more than 500k downloads per week. GitHub stars in the project of the repository are more than 36k.
Reset CSS - as the name suggests, it resets all styles, i.e. it removes all browser's user agent styles.
Example: it would do something like that below:
html, body, div, span, ..., audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Current status: it's much less popular than Normalize.css, the reset-css package shows it's something around 26k downloads per week. GitHub stars are only 200, as it can be noticed from the project's repository.
Sometimes, the best solution is to use both. Sometimes, it is to use neither. And sometimes, it is to use one or the other. If you want all the styles, including margin and padding reset across all browsers, use reset.css. Then apply all decorations and stylings yourself. If you simply like the built-in stylings but want more cross-browser synchronicity i.e. normalizations then use normalize.css. But if you choose to use both reset.css and normalize.css, link the reset.css stylesheet first and then the normalize.css stylesheet (immediately) afterwards. Sometimes it's not always a matter of which is better, but when to use which one versus when to use both versus when to use neither. IMHO.
Normalize.css
Normalize.css is a small CSS file that provides cross-browser consistency in the default styling of HTML elements.
That means, that if we look at the W3C standards of the styles applied by the browsers, and there is an in inconsistency in one of the browsers, the normalize.css styles will fix the browser style that has the difference.
But in some cases we can’t fix the faulty browsers according to the standard, usually because of IE or EDGE. In these cases the fixes in the Normalize will apply the IE or EDGE styles to the rest of the browsers.
Real life example
Chrome, Safari and Firefox render <h1> tags that are inside an <article>/ <aside>/ <nav>/ <section> tag with a font-size that is smaller than an independent tag, and with a different margin size. These are the user agent styles in Chrome, Safari and Firefox in the case of an <h1> tag inside an <article>/ <aside>/ <nav>/ <section>
Tag
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}
Example:
/*
Correct the font size and margin on `h1` elements within `section` and `article`
contexts in Chrome, Firefox, and Safari.
*/
h1 { font-size: 2em; margin: 0.67em 0;}
Reset CSS
Reset CSS takes a different approach and says that we don’t need the browsers’ default styles at all. Whatever styles we need, we’ll define in the project according to our needs. So “CSS Reset” resets all of the styles that come with the browser’s user agent.
This approach works well in the above example, with those <h1> to <h6> default styles: most of the time we want neither the browsers’ default font-size nor the browser’s default margin.
Here is an example of what a small part of CSS Reset looks like
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
In the CSS Reset way, we define all HTML tags to have no padding, no margin, no border, the same font-size and the same alignments.
The problem with CSS Resets is that they are ugly: they have a big chain of selectors, and they make a lot of unnecessary overrides. And even worse, they are unreadable when debugging.
But still there are styles we prefer to reset like <h1> to <h6>, <ul>,<li> and etc.
Normalize.css :Every browser is coming with some default css styles that will, for example, add padding around a paragraph or title.If you add the normalize style sheet all those browser default rules will be reset so for this instance 0px padding on tags.Here is a couple of links for more details: https://necolas.github.io/normalize.css/ http://nicolasgallagher.com/about-normalize-css/
For example, if I have:
td { font-size: 1.3em }
h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }
And I have headings/paragraphs inside my table-cells, I know that I can avoid compounding the font-sizes by the following:
td h2, td h3, td p { font-size: 1em }
Which would result in the headings/paragraphs in my table-cells having font-size of 1.3em (that of the td).
But what I'm looking for is a nice, clean way for each child element to have it's original font-size, not that of the parent.
I'd really like to avoid doing the following (and of course I'd like to avoid using px):
td h2 { font-size: 1.54em } // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em } // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em } // 1.3 x 0.92 ~ 1.2
For anyone familiar with LESS, I'm using that, and thought I should be able to use it to do the calculations for me, e.g. Using accessors:
td h2 { font-size: h2['font-size'] / td['font-size'] }
This at least would use the original values to do the calculation but feels just as clumsy as the above and besides, it seems LESS no longer supports accessors anyway.
This seems so simple in concept, I feel like the answer's staring me in the face, but I've been banging my head against this for a while and can't find the answer anywhere.
What you want can be achieved by using rem units.
rems are relative ems which base their calculations on the font-size declared on the body element.
Compounding issues simply disappear.
http://snook.ca/archives/html_and_css/font-size-with-rem is an excellent article to articulate this.
note: IE8 requires a px fallback, but this won't be an issue since you're already making use of a preprocessor.
EDIT: I've written a Sass mixin which outputs rems with their respective px fallbacks for most CSS properties:
https://gist.github.com/larrybotha/4153104
I'll answer the same as my question, use Pixels!
A pixel is a relative unit, it's relative to the screen resolution, users can set their own desired minimum pixel size, and zoom zooms pixels. I'd venture that it is more difficult for a designer to approximate non pixel font-sizes at every perceivable resolution than it is to relax and let the browser tools take care of it?
It used to be that a font declared in pixels wouldn't resize in IE which was very annoying for some, not very accessible if a user deliberately chose to view on a lower resolution for instance for eyesight reasons - that's where the "em's were best for fonts" thing came from, but that was never true IE could be foiled using percentages instead which then offers the same problems ;).. I remember getting annoyed when the fad was for "teeny text", but then the joys of discovering CTRL+ in non-ie .. anyway now the pixel sized fonts will scale perfectly well, if you're building a fluid site you can build it with a mixture of em's for widths and pixels for font-sizes - if it looks OK at your resolution try zooming it, both up and down - you have to go pretty far up or down before it becomes illegible, and who's zooming it that far up/down except designers ;)
Have you considered adding a class to the headings that are in table cells? The extra level of specificity would override the effect of the cascading styles compounding each other, I think.
I would also like to reset the font-size of <small> tag too normal HTML elements.
Like I want the content in small tag to be 13px of what other tags are.
How do I do this ?
I think a better way is to do
small {
font-size:inherit;
}
This way, the small tag will be the same size as whatever element it's contained in, so if for some reason you have:
<h1>This is some <small>small</small> text</h1>
The word "small" would be the same size as its surrounding words.
The one caveat with this is that I'm not sure if it will work in IE. I suspect that it will, but you'd have to try it to be sure.
You might want to look into using a CSS reset that takes care of this and similar issues for all tags.
First, it's hard to tell what you're asking. Here's how to set the font-size of those tags to 13px.
small {
font-size: 13px; /* you can use !important, but I wouldn't recommend it */
}
Second, 13px is not a very small size, unless the rest of your text is enormous. That fact, together with your phrasing ("I want the content in small tag to be 13px of what other tags are") leads me to suspect that what you really mean is you want the <small> text to be a percentage of the rest of the text. You can do this as follows:
small {
font-size: 13%;
}
However, this seems rather small. If you really want a percentage, I'd suggest something between 60% and 80%.
If you want to make it 13px exactly, Keltex's answer will do it for you.
If you want to reduce the size by 13 pixels from the base font-size of its parent, you have the following options as there is no "make it exactly 13 pixels less" operator available:
If you know the base font-size, hardcode a value that is your 13 pixels less in your selector.
Rely on percentages or ems to size it down appropriately. For instance, instead of "13 pixels less" think of it as being a given percentage of the base font-size. i.e.
p{ font-size: 24px; }
small{ font-size: 45% /* Will make it approximately 13 pixels smaller */ }
Your question is hard to understand. Do you want to make text in small tags the same size as the rest of the text? I'll assume that.
small {
font-size: 100%;
}
This will make the small tag have the same font-size as the rest of the text.
Why you would want such a thing is beyond my comprehension, but you have your answer.
[edit] this has the same effect as #notJim's answer - if the parent's font-size changes, this one adapts accordingly and adopts that new size.
Add this to your CSS:
small
{
font-size: 13px !important;
}
What are cons of global css reset * { margin: 0; padding: 0; }?
What people prefer eric meyer css.
This is eric mayer css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Isn't it bit specific and heavy. I never use many elements which is in this rest like blockquote and caption.
Update:
and eric reset resetting 9 properties for 58 elements. isn't it also slow same like people talk about global reset.
What are cons to use this
* { margin: 0; padding: 0; }
select { min-width:1.5em; }
The problem is that there are some elements that need margins and/or padding to display properly, and people forget to set them back. Also, for many elements, you are going to be setting your own styles, overriding the reset, so the reset is redundant; you should instead just set the styles the way you want them.
One problem I see a lot is with lists. If you blindly apply a reset, the bullets for the list will appear outside of the containing element, which always bothers me:
+--------------------+
| Some paragraph, |
| with text. |
| |
*| One |
*| Two |
*| Three |
+--------------------+
Perhaps some designers are deliberately doing this, but I think a lot of the time I see this, it's because someone has blindly applied a reset and not thought about what it would do to the indentation of list items. If you look for this, you will see it all over the place; and pretty much invariably, the site you see it on uses a CSS reset. For more information on how to format lists correctly, see Consistent List Indentation on the Mozilla Developer Center.
Another problem is that after doing a reset, there are sometimes obscure elements that people don't remember to apply margins back to. For instance, the <dl> element; it's default style isn't great, but it at least lets you distinguish between the <dt> and <dd> elements within them. If you apply a reset, you lose that and wind up with everything crammed together with no distinction. Stack Overflow's reset does this, for instance, making <dl> elements pretty much useless:
Term
Definition
Term
Definition
Stack Overflow's reset also lacks any top or bottom margins on the <dl> element, and only a bottom margin to <p>; so I had to add an extra <br> in order to prevent the above <dl> from running up against this paragraph.
If you do use a reset, be very careful to make sure that all HTML elements do display in a sensible way. And remove the parts of your reset that are overridden by later rules that you add; there's no real reason to reset <b> and <i>, and then later apply font-weight and font-style to them, and if you reset a margin to 0 and then set it to 2 em, then why not remove the reset to 0?
Eric Meyer's CSS reset is not only to remove padding and margin, but to make default styling consistent across browsers. Many of the style rules reflect that fact. I don't know which elements are not included in his reset by default, but I can say that the particular reset you posted does contain many revisions to ensure maximal compatibility across browsers.
As for speed, if the speed of cascading < 100 styles through your site is what makes or breaks your performance, you probably have deeper issues at hand. Make sure that as many files are cached as possible and don't sweat a few extra CSS rules.
speed is a con, however slight the impact, using a global style sheet (*) applies the attributes to EVERY element possible, even if you are not using one or more
I don't see too many cons. I think using a really robust CSS reset is essential these days if you are running your site in multiple browsers.
The problem some of the time is that different elements such as p, h1,h2 etc are all affected by line-height, font-size etc, so just doing padding:0 and margin:0 won't guarantee a full reset.
Hope this helps.
The cons for a global reset are more based on your own personal setup. You can also edit someone else's reset as long as you credit them.
Cons:
I created my own reset way back when and made mistakes that I had to go back over and remove.
Hence if you use someone else's reset and it contains something you didn't expect you might 'lose functionality' on some objects that you were used to. This can be remedied by erasing the offending reset if you need to.
Pros:
I've been working with resets for almost a year now and I like it a lot. I really don't notice any performance issues and nothing surprises me about the way elements display, and I don't have to do stupid stuff like setting the margin/padding of the body and html to 0 whenever I build a new site.
The difference is miniscule, but the "star rule" actually takes longer to process as it goes through each element, applying (or in this case removing) the default styles.
Resets like Eric Meyer's target elements specifically, meaning slightly less processing time.
Setting line-height to 1 as suggested is just plain wrong from the standpoint of legibility. Even in the context of printing, layout software sets a default line-height (leading) of about 1.15. For the web, where you often have long measures (line lengths), you MUST have a line-height greater than 1 (typically, I start with 1.5 and often up it to 1.75). There is a reason for typographic principles, and that is to help readability. Setting solid, a print term for line-height of 1, is only to be used in special situations, such as very large size headings. IT SHOULD NOT BE A DEFAULT.
Yes, people "can" revise/alter the reset in their own styles, but the fact is, this reset is seen as a holy grail by so many, who blindly adopt it and never change things to use sound typographic principles. And this site is an illustration of the problem. Your eye needs some vertical space to easily follow from the end of one line to the start of another. When line-height is equal to the font-size, it makes text harder to read.
for browser there are some default margins and padding and they may be another for each element (for example another for li and for input) depending of browser.
reseting this value will make you sure that in each browsers for all elements margin & padding are 0
Dont use resets.
Resets are really annoying to fellow and future developers.
When I add a h1 tag I expect a margin and padding on it. When I add a p tag I expect space between each paragraph.
Its really annoying when people remove all of this. I end up having to go back look at their reset figure out which of the billion terrible ones out there this developer decided to use and then more then likely change.