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;
}
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'm using Wordpress and I currently have installed Tesseract theme on my site: (http:// instantiwebs . com)
I would like to remove left/right margins on everything, like this site did it: http://tyler.com/. It is using also the same theme.
I've looked through the CSS style and can't seem to find the right section to edit. The stylesheet is located here: http://alexardavin.com/instantiwebs.com/wp-content/themes/Tesseract/style.css
Help would be really appreciated, thanks!
Just add this code to the bottom of the stylesheet, it should work for you.
EDIT: Make sure you have the !important statements.
#site-banner {
max-width: 100%!important;
padding-left: 20px;
padding-right: 20px;
}
#footer-banner {
max-width: 100%;
padding: 0 20px;
}
#site-banner-right {
right: 20px!important;;
}
Use the free plugin Wordpress My Custom CSS.
It is light, and for small CSS edits you don't change the theme source code.
It prevents your edits to be overrided when you update.
body .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
try above code
It's my first time using a bootstrap theme with my ASP.net web application, thus I've been having some difficulties with the CSS editing.
I got this bootstrap template online, and in order to accommodate my needs I want to change the color of the footer div to another color. Here's the code in html
<div class="footer_bottom">
<div class="copy">
<p>Copyright © 2014</p>
</div>
</div>
and here's the css
.footer_bottom {
padding: 2em 0;
/*background: #7cc4cc;*/
background: #5DBCD2;
}
Basically, I wanna change the color of the div from #7cc4cc to #5DBCD2. When I run my page in google chrome and select the inspect element option the code supposedly works, but in the css properties backgroud: #7cc4cc is slashed out above the line background: #5DBCD2 (which is not slashed out) but the color of the div shown is still #7cc4cc. In short I can't change the CSS color properties of the theme for some reason. Any help would be greatly appreciated.
You could learn a lot by reading about CSS Specificity. CSS is about rules on top of rules, so what I think is happening, is that some rules are getting applied over your:
.footer_bottom { background: #5DBCD2; }
Check for any rules that have higher specificity and make this .footer-bottom declaration higher than that.
The !important solution in the other answers is not something you want to do. Over time these things are going to bite you in your ass, as they blow your specificity through the roof.
Use !important to override bootstrap styles:
.footer_bottom {
padding: 2em 0 !important;
background: #5DBCD2 !important;
}
You are trying to override the bootstrap css so you need to add !important to your background color change like so :
.footer_bottom {
padding: 2em 0 !important;
/*background: #7cc4cc;*/
background: #5DBCD2 !important;
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 ).