Thanks in advance ! I tried float, margin, and padding nothing without any help, I wanted to be just sticked to the top corner of the background ... screen shot of the problem
http://www.mediafire.com/?6ngtuh4k5nf43r2
That space is (probably) the body's, not the element's.
body {
margin: 0;
padding: 0;
}
Hard to tell because I can't see the code inside your <body> tag in the screenshot, but almost certainly that's the issue.
Also consider to use css reset it helps with browser inconsistences.
You can use CSS reset tool to reset all the browser-default styles, for example add following rules at the top of your default css file.
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,select{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}/*address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}*/ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
Add these to your css:
body, html {
margin: 0;
padding: 0;
}
.element {
position: absolute;
top: 0;
left:0;
}
Whenever I start a new project i always have this in my css file
*{
margin:0;
padding:0;
/* Optional Below */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
This resets the padding and margin on everything ( not:box-sizing ).
Related
While writing html, the element has padding zero and margin is zero, but there are spaces around the text. How can I destroy it?
line height etc. I tried features but it didn't work.
Did you remove the page's default stylings before styling mentioned elements?
I think that may be the issue.
Before start styling of your page it is a best practice to remove all the styles and uniforming the default look first.
I've been using the code below for all of my projects up to this point.
*{
margin:0;
padding:0;
box-sizing: border-box;
}
This will remove basic stylings for the whole webpage.Copy and paste the above code into your CSS file.
If this is not the case, you need to add the line-height property to your h1 tag. Here is the snippet given below.
*{
margin:0;
padding:0;
box-sizing: border-box;
}
h1 {
background-color:lightblue;
margin-top: 0px;
line-height: 75%;
}
<h1>Transitional<br>Heroes<h1/>
remove the page default styling.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
It'll save you ton of time to start any of your projects with the below css codes.
*{
margin:0;
padding:0;
}
By default, HTML includes certain styles in the different tags.
To create a project from scratch, it is advisable to use a CSS reset file. The community has created several.
These files reset all the default styles of HTML and the different variants between browsers to achieve the same visual result in the most popular browsers on the market.
Here is a CSS reset offered by the user karbassi through GitHub:
https://gist.github.com/DavidWells/18e73022e723037a50d6
I have a jquery plugin, that annoyingly has this at the top of its stylesheet.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
It's causing my h1 to behave differently on this page. Is there a way to exclude certain selectors from this? Otherwise I guess I have to work out what it's applying to and list everything rather than *?
Well, quick answer is replace * for *:not(h1).
This looks like a simple attempt of a normalize. You could remove it and fix whatever is wrong on plugin's elements or simply fix your h1 to have the margin/padding it was supposed to have.
I would simply suggest you to use selector just h1 which will override the all selector(*):
h1{
box-sizing:content-box;
margin: 5px;
padding: 5px;
}
It's always better to use * selector for eg. as you may want to change #somecontent h1 but not h1 then just using #somecontent h1{...} would override the rule of * selector and even just h1 tag will be benefited from * selector.
A really nice idea would be to override * selector itself if you're not interested with the plugin css:
*{
border-box: content-box;
margin: 0; /*add your value as you wish*/
padding: 0; /*add your value as you wish*/
}
And you may also update the h1:
h1{
margin: 5px;
padding: 5px;
}
But to consider this, you must make sure that your css file is at last line of the plugin css file.
<link rel="stylesheet" type="text/css" href="plugin.css" />
<link rel="stylesheet" type="text/css" href="main.css" /> <!-- last in order--->
*:not(h1)
{
box-sizing:border-box;
margin:0;
padding:0;
}
modern browser solution
*:not(h1)
{
/* css code */
}
cross-browser compliant solution
h1{
box-sizing:none;
margin:auto;
padding:auto;
}
EDIT: removed superfluous !important flags.
This is only a partial answer but I would suggest instead using inherit for box-sizing. You can then easily reset an entire section if needed. You end up with less code utilizing box-sizing: border-box; in this way. Resetting your H1 is obvious. Just reference it explicitly to bypass your universal selector.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
With this HTML:
<div class="content">
<h1>Some Heading</h1>
</div>
Reset it with this CSS:
.content { box-sizing: content-box; }
I am working on making a navigation bar, and I am running into a problem. This is what my navigation bar looks like:
It has like a 8px white border around it, and this is what I want it to look like:
Without the 8px white border around it.
I am using this code for it:
.header
{
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position: relative;
margin-bottom: 30px;
}
I can using this:
margin-left:-8px;
margin-right:-8px;
margin-top:-8px;
And put width to 102%, but then it gives me scrollbars on the bottom.
This may be confusing, but I am a beginner, and I need help.
If you can help me, I will appreciate it a lot!
Thanks.
You have to set the margin on your body to 0 like this:
body
{
margin:0;
}
Your body tag comes with margins. That is your problem.
Do:
body { margin: 0px; }
I believe it's because the browser has some default styling, one of which is a margin of 8px surrounding the content, look into "css reset" or if you just want to remove that one thing try
body
{
margin: 0px;
}
Hope that helps
set your html and body to:
body, html {padding: 0; margin: 0;}
This will reset all browsers and remove the border.
This will declare on the entire page not just to the Body.
* {
padding: 0;
margin: 0;
}
http://jsfiddle.net/cornelas/gwM4X/2/
User Agents apply default styles to your web page, which you need to override, in this case it's margin so either you can reset the margin like
body {
margin: 0;
}
Else you can also use a * universal selector like
* {
margin: 0;
padding: 0;
}
DEMO HERE
For a proper stylesheet reset, use CSS RESET STYLESHEET
I have read through many posts on this site and other things on the internet about centering a div.
To the left of my div there's a white space that I can't fix.
Here's the Jsfiddle
http://jsfiddle.net/ZYfaY/
So far I have tried
div#navigation-head{
background-image:url('img/head.png');
text-align: center;
width: 100%;
height: 2em;
position: fixed;
top: 0;
left:auto;
right:auto;
}
It's the default padding the browser adds to the body tag.
You can zero this out, by doing
body { margin:0; padding:0; }
Or better yet, use a reset stylesheet before your main styles, that way you're working from a consistent base-line - http://meyerweb.com/eric/tools/css/reset/
JSFiddle Demo
You need to clear the basic padding and margin from your html use this
body{margin:0;padding:0;}
Example is here http://jsfiddle.net/ZYfaY/3/
Most of the elements have default properties, product of UA's stylesheet (where UA means User Agent). If you inspect the body element, for example, you'll see that he has properties by default.
You have to reset those properties.
A good practice is including a Reset CSS.
For example:
/* Reset CSS */
body, div, section, nav, ... {
margin: 0;
padding: 0;
}
a { text-decoration: none; } /* If you will eliminate the underline for all `a` elements */
/* The rest of reset properties */
How to include a Reset CSS?
One option is "call him" in the head element:
<head>
<!-- I assume that reset.css is in *css folder* -->
<style>
#import url("css/reset.css") screen
#import url("css/style.css") screen
</style>
</head>
Or "call him" from your principal stylesheet, for example:
/* Style CSS */
#import url("reset.css") screen; /* I assume that style.css and reset.css are in the same folder */
Your problem is that in your code, your body have a margin by default and you didn't reset that default property. You have to eliminate putting:
body {
margin: 0;
padding: 0;
}
Here's a DEMO
Be good,
Leonardo
For some reason there is an unusual border on my page. I'm unable to find the cause for it in the code:
http://danie1.me/temp/
Any idea how this can be fixed?
You have to update your <body> styles like this:
body {
color: green;
margin: 0;
padding: 0;
}
And it's generally a good idea to use some kind of CSS Reset to avoid a lot of troubleshouting in different browsers.
All elements by defauls has some style. Tag body by default has margin not 0. So
body { margin: 0px; }
Your body has extra margins. It is better to use a CSS Reset, a simple one:
* {margin: 0; padding: 0; list-style: none;}
Or just to body:
body {margin: 0; padding: 0; list-style: none;}