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; }
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 am creating a website in html. I have used a ready made html contact form in it. The css of which starts like below
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
when i inert it to my website its making my whole page misaligned, so i decided to give the properties to the form only, so i put whole form in a div and gave a class to it called starc. Now i did the following changes to css to select the whole elements in that class:
* .starc {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
but this is not being applied to my form. Can anyone please tell me what is wrong in my code. Thanks in advance
It is a common thing to use a css reset like the popular normalize. I would strongly suggest that you do it. I would then delete this rule that you got
* { ... }
Because that resets the margin and padding on all your elements on the page. The box sizing is good to have but that is covered in normalize lib.
To get to your question. If you want to reset the margins on all of your elements inside the form just reverse the asterix with the class
.starc * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
if you want for example only the direct children in the form then do this
.starc > * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
Asterisk(*) selects all the elements on the page. If you want to use it for the class starc, then remove asterisk (*).
More info: https://www.w3schools.com/cssref/sel_all.asp
if you just want to select an element with class "starc" then the selector would be:
.starc {
}
If you use * .starc then its the same as above because the combinator selects elements with class "starc" which are nested inside every element. So .starc and * .starc makes no difference.
On the other hand if you want to select all elements that are inside the class "starc" then the combinator would be like .starc *.
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;
}
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