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
Related
I am creating a web template using bootstrap, so I have bootstrap.min.css included in the head of the page with some other css files and my own css file is the last one I linked.
In my css file I have made a reset of the elements like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
But this code does not effect the elements in the page!, Most of them has margin and padding. and when I inspected them using the DevTools, I found out that this is caused by bootstrap!
Any solutions? or an explanation of what happens here?
NOTE: I use Bootstrap 4.1.1
Do you integrate bootstrap optional theme? If yes remove it,
and also css have !important for example body { color: blue !important }
Try with !important
* {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
I have a css where I defined a class for the top div with these properties
.topbluebar {
margin:0;
height:19px;
width:100%;
background-image:url('../../Images/top_blue.gif');
clear:both;
}
Here is the simple Html page
<link href="~/Content/Style.css" rel="stylesheet" />
<div class="topbluebar"></div>
<div>Foo foo</div>
Image is appearing but not with the top of browser but with little margin from top which I don't want.
In simple words I want to implement it like Stackexchnage topbar class but it doesn't seems to work for me at all.
I have read many answers but none of them worked for me yet.
Try adding the following in your stylesheet.
body { margin:0;padding:0 }
http://jsfiddle.net/z18Lpy99/
Also, to avoid these kind of issues, it is a good idea to use CSS Resets. Try reading up on http://cssreset.com/
A really simple solution would be to add the following css (below) to the top of your file. This essentially resets the margins to 0.
Here is a link to the updated JSFiddle: https://jsfiddle.net/r58hvuzp/
*{
margin: 0;
}
Try this
* {
margin: 0;
padding: 0;
}
Basically lots of things in html has default styles which include default values for padding and margins.
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; }
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 ).
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