This hadn't hit me until now (and this is not only in webkit browsers). On all texts in like p tags, h1 tags etc... there's an extra space over and below the text.
In chrome I found this:
user agent stylesheet
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
This makes the alignment wrong in some places. And yes I'm using a reset stylesheet and no padding or margin are added. Pretty much a basic setup. Why is this and how do I solve it?
You can also directly modify those attributes like so:
-webkit-margin-before:0em;
-webkit-margin-after:0em;
Works for me in Chrome/Safari. Hope that helps!
These -webkit-margin(s) are overwritten by margin: 0; padding: 0;. Do not worry about them.
Extra space? Maybe you've set line-height:?
I had the same issue. Displaying correctly in Firefox but not Chrome.
I had a closer look at http://meyerweb.com/eric/tools/css/reset/ and found that I hadn't declared a general line-height for the body tag in my stylesheet. Set it to 1.2 and that recreated the correct layout in both browsers.
Just remove the whitespace between tags e.g.
<p id="one"></p>
<p id="two"></p>
becomes:
<p id="one"></p><p id="two"></p>
I had a same problem. Extra space between menu links. None of the above solutions worked. What worked for me, was negative margin.
Just do something like this:
margin: 0 -2px;
NEW EDIT:
This has nothing to do with -webkit-margins. Most likely your problem occurs with inline elements. This happens because you have spaces or line breaks between your inline elements. To fix this, you have many options:
remove all spaces and line-breaks between inline elements
skip element closing tag - for example </li> (HTML5 does not care)
negative margin (as stated above - problems with IE6/7 - who cares, upgrade ;)
set font-size: 0; to problematic inline element container (has issues with android and if font-sizing with ems)
give up inline and use float (this way you loose text-align:center)
Explained more specifically and examples by CHRIS COYIER
I was having this same problem with my <h3> tag. I tried setting margin:0;, but it didn't work.
I found that I was habitually commenting out lines in my css by using //. I never noticed it because it hadn't caused any problems before. But when I used // in the line before declaring <h3>, it caused the browser to skip the declaration completely. When I traded out // for /**/ I was able to adjust the margin.
Moral of this story: Always use proper commenting syntax!
For me, the picture was:
* {margin:0;padding:0;}
Firefox (FF) and Google Chrome both put 0.67em margins regardless.
FF showed its default margin, but crossed out, but applied it anyway.
GC showed its default margin (-webkit-margin-before...) uncrossed.
I applied
* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}
but to no avail, although GC now showed its default margin crossed.
I found out, that I can apply either
line-height: 0;
or
font-size: 0;
to achieve the desired effect.
This makes sense, if one assumes, that the margin is of the .67em - type.
If anybody could give an explanation, why browsers make our lives miserable by applying a line-height dependent, non-removable margin, i would be really grateful.
For me in Chrome it was some 40px padding-start that was causing this. I did the following that worked:
ul {
-webkit-padding-start: 0em;
}
-webkit-margin-before: 0em;
-webkit-padding-start: 0;
-webkit-margin-after: 0em;
This solved it for me when I was having this exact problem.
In your css file add the following.
* {
-webkit-margin-before: 0em !important;
-webkit-margin-after: 0em !important;
}
'*' selects all css elements and overrides the webkit-margin.
Modern properties
The following properties should be used instead.
margin-block-start: 0;
margin-block-end: 0;
It's very rare to need to use these at all, but the following can be useful to avoid extra space after the last paragraph in a series.
p:last-child
{
margin-block-end: 0;
}
I also found that even in Chrome you can trigger the 'ghost margin' by setting margin to inherit in some cases.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
I had the same problem. Suddenly one out of my three table cells containing data its header was moved down a little bit. My problem was simply solved by adding this:
table td
{
vertical-align: top;
}
Seems like some other element in a 'higher' style sheet was telling my data to center itself in the cell, instead of just staying on top.
I guess its just stupid, and wasnt really a problem... but the next person to read this topic might have the same stupid error as i did :)
Take care!
If user agent stylesheet is kicking in, it is because the tag property was not properly defined in your css stylesheet.
Chances are that a typo, forgotten bracket or semicolon is breaking up your stylesheet BEFORE reaching the tag property settings your page later refers to or "needs".
Run your CSS thru error checking, like CSS LINT and fix whichever errors are eventually detected.
Related
I created a global CSS file. It is working perfectly, except that I am unable to set margins.
For Example CSS:
.update_date {
font-size: small;
text-align: right;
margin: 0;
}
This is a CSS style for class update_date. When I use it, except margin, everything is applied. It's the same case with every other class. None of these classes are overridden in any other place.
Can someone provide a workaround on how I can set margins globally.
Environment:
Angular 10/11
Try using
.update_date {
font-size: small;
text-align: right;
margin: 0 !important;
}
this happens because that style is getting overridden by another
You should avoid "!important" if you can. It can cause unintended styling issues later down the line - see below.
My suggestion: In your browser, use your "Inspect Element" (Ctrl + Shift + I) tool to figure out where in the DOM Tree your styling is coming up and what is overriding it. This will help identify if !Important is truly the only solution you can use.
Inspect Element Tool Picture Example
Hard to say with your code snippet what is actually happening and being this post is 1.5 years old, you may already know this info. But I didn't see any other responses, so just wanted to raise awareness to the "!important" property.
More about !Important
From W3 Schools (I am sure you can find this elsewhere as well): https://www.w3schools.com/css/css_important.asp
"Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to."
What’s the default margin that HTML sets for its <body> tag? I noticed that there’s some automatic margin, but I’m wondering if anyone knows how much it is (and whether it’s in px or %, etc.).
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.
According to W3School's CSS reference,
the default properties and values for a body tag are,
body{ display : block; margin : 8px; }
And one can quickly get the computed details of any element by accessing the Computed Pane in the Chrome Dev tools.
css default values
https://www.w3schools.com/cssref/css_default_values.asp
body{ display : block; margin : 8px; }
* {
margin: 0;
padding: 0;
}
The body can also be reset using the asterix tag.
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
check this page out: http://jsbin.com/itufix with IE (page automatically enables IE7 mode).
Here you'll find examples how inline elements (input and span) are rendered as with display block. All elements margins and padding is set to 0.
If you use Developer tools for IE (IE8-9) you could have noticed that input shows offset: 1.
Can anyone explain what is actually happening and how to fix this?
NOTES
Adding float to input fix this, but this is not an option. I need to get this done without float.
Input/span and its div parents property hasLayout value is true!
Any info related to this bug is welcome.
UPDATE:
Here are more examples of how styles are used: http://jsbin.com/itufix/13. Each field can have description under it, plus the whole div.form-item may float (in case I need more than one field in line)
If you can't float the input (why?) then you could do this:
*+html input {
margin-top: -1px;
margin-bottom: -1px;
}
http://jsbin.com/itufix/5
That's using a CSS hack so the workaround is only applied in IE7.
Looking at your CSS, I see the following:
div.form-item{
padding: 0 1px;
}
Changing this to padding:0; seems to remove all padding on the form fields to my eyes. See:
http://jsbin.com/ojeros/2/
Or am I missing something?
While some people use this reset.
* {
margin: 0;
padding: 0;
}
Is every element has default margin and padding in each browser default stylesheet( but differently)?
While eric meyer collected some most used selectors and given this to all
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Are those elements has different type of font sizes?
different baseline, different background, outline and border?
if we keep besides cons of universal selector.
is this
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
better than this
* {
margin: 0;
padding: 0;
}
You can find all default styles here: CSS2.1 User Agent Style Sheet Defaults.
If you investigate the list closely, then you'll notice that the browser-specific margins are only set for HTML-standard block elements and that nowhere a browser-specific padding is been set. In other words, the padding: 0 is superfluous. But indeed, the margin is the most disbalanced among browsers, to answer your actual question.
I am probably going to tread on someone's toes here, but in my humblest opinion using a CSS reset stylesheet is ridiculous. You would have to redefine most of those margins (and paddings) yourself anyway. You could as good just learn and keep yourself the rule to define yourself the margin (and if necessary padding) for every block element which you're going to use in the document.
As to the remnant of the reset:
The border: 0 is superflous as well. The <hr> and the most form input elements are the only elements which have a default border. Without it, the <hr> is invisible (actually, this fails in IE6/7) and the text input elements on a form with same background color are invisible as well.
The outline should certainly not be resetted, it breaks accessibility. You need to control it yourself, e.g. resetting it yourself on only links with a (background) image since that's the major reason to reset it. But still, it breaks accessibility. Rather consider giving it a different outline color or style so that it is still visible, but less disturbing.
The font-size: 100% would force you to redefine them yourself in the <h1>, <h2>, etc elements. But even without the reset, you would often already like to do that anyway. What's the point of this reset then?
The vertical-align: baseline; breaks alignment of <sub> and <sup> so that they look like <small>. Further the table headers may also be affected. Those defaults to middle in all browsers. You would need to redefine them yourself again. Plus, it is known that this reset may cause IE6/7 to go havoc with images.
The value of background: transparent; is unclear to me. I don't see any point of this reset expect that it may make IE6/7 mad. You would also need to redefine the background color for all form input elements yourself again which just adds more work (for the case they're placed in a colored container). I am sure that whenever you encounter an element which needs transparent background, you could easily spot that yourself and set it yourself.
Enfin, see what you do with this information. I don't stop you from using the CSS reset. I myself have found the CSS reset only useful >10 years back when I was just starting with HTML/CSS. But with years and years, I've learnt as well that this is plain nonsense. But I admit, it's useful for starters since the reset will force them to set the margins and other stuff themselves explicitly. Which you could do as good without the reset.
Well, 'better than this' is hard to say, but the one with more stuff does more.
outline 0 makes links not have the dotted border around them.
Border 0 makes images and such not have a border around them.
font-size: 100% probably does something like ensure the fonts are 100%.
vertical-align: baseline sets all vertical alignments to the bottom of the container,
background: transparent prevents some png problems.
but margin:0 and padding:0 are two that defiantly should not be omitted from your reset list.
The short answer is: Feel free to set all of those if you are ready to override it for any element that may need it later.
However, note that you may have a lot of work ahead of you when it comes to form elements. They require at least a border to look good, and some of them (e.g. buttons) need a padding too. Also, some browsers display a 3D-ish border around buttons by default. If you set border to 0, you will not be able to get that 3D look back using CSS.
Also, you might want to check out http://www.blueprintcss.org/. It equalises browsers quite well, it seems, though I haven't tried it myself.