i have an issue with my css where if i use margin: 0 instead of margin-top: 0, for header p, the header { margin: 0 0 20px; } will be as good as not there. isit supposed to be like that? if i see what happens in firebug, its because the margin-bottom of header collapsed into the next sibling, the section.
html
<header>
<h1>ToDo List</h1>
<p>HTML5 Offline Capable Web Application</p>
</header>
css
header { font: 24px/1em Notethis; color: #666; margin: 0 0 20px; }
header h1 { font: 60px/1.4em Hetilica; margin: 0; }
header p { margin-top: 0; }
By default, Firebug only show you part of the story.
To see what really happens when you change margin-top: 0; for margin: 0 0 0 0;, please click on the arrow right to the Style tab (above 'header p' on your snapshot) and select "Display default CSS properties" or sth like that and you'll see downward that html.css already styles p as:
p {
display: block;
margin: 1em 0;
}
Beware, do NOT modify system styles or you'll have to restart Firefox, reopening tabs won't be sufficient.
BTW this 1em margin is what you see in HTML without any style (menu Display / Page style / No style in Firefox or CSS menu of Web Developer Toolbar) : your paragraphs have some vertical margin.
So basically you erased a 1em bottom margin.
I think that the problem here is that your header element is not actually rendering any margin applied to it at all. The space you are seeing is actually the result of a default margin applied to header p.
The reason I say this is that many browsers will not automatically treat the header tag as a block-level element unless explicitly defined as such:
header { display: block; }
After applying this statement to header in your CSS I could successfully apply header p { margin: 0 } and retain the margin specified in header itself. Removing this statement will revert back to the behaviour you are seeing.
Related
I'm trying to remove ALL space around a <h2> element
I have this simple markup:
<div>
<h2>Count down</h2>
</div>
I tried to remove spacing with:
h2 {
margin: 0;
padding: 0;
line-height: 0;
}
But some white space remains. You can see it on this screen shot:
There's spacing both over and under (and it's not padding or margin). How can I get rid of that extra spacing?
EDIT: Here is a simple jsfiddle to illustrate. I want to remove the space colored light blue.
The inspector in the screenshot shows
.countdown h2 {
margin: 0 0 10px;
}
which equates to:
.countdown h2 {
margin-bottom: 10px;
}
That means you must have a styled h2 somewhere in your css.
Because the style is nested as .countdown h2, it will take precendent over just styling h2 by itself.
If you cannot delete it, and would rather not use !important to override it, you may be able to override the style like:
body .countdown h2 {
margin: 0;
}
This gives it three elements, making it more specific than the two in the inspector. See an example of how it works here: JS Fiddle
More on CSS precedence: W3 - The cascade
you have padding on your countdown class which surrounds your h2 of 40px as you made it global it will put padding on top bottom left and right at 40px to fix try this
.countdown { padding:0px 40px 0px 40px; }
if you mean the h2 has space at the bottom thats because you have a style on it putting margin of 10px at the bottom to remove just delete that style.
.countdown h2 { margin: 0 0 10px; }
if you dont want to delete it you can overide it by doing
h2 {
margin: 0px !Important;
padding: 0px;
line-height: 0;
}
you should not really use the !important unless really needed which in this case it is not.
Digging through Style.css theme, I coulnd find how to change 2 kinds of margins:
Margin between browser border and site page
Margin between site page border and site content.
I did it for my website http://raigle.net. See Margin 1 and Margin 2 on the picture:
I'm not a pro in Wordpress styling and would be glad to any advice!
When looking for styling, you can use Chrome's Inspector.
Right click an element > Inspect element. It looks like you have an element that acts as an overlay. Just delete (select in elements panel then hit delete) the node and try again.
It's pretty nifty.
http://i.imgur.com/EfCARba.png
about margin1:
it is not margin, it is padding:
.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 15px; /* change here */
}
about margin2:
it is not margin too, it is padding:
.site {
padding: 0 24px; /* change here */
padding: 0 1.714285714rem; /* change here */
background-color: #FFF;
}
http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css - line 12 - change padding style for .ui-content {
in http://raigle.net/wp-content/themes/twentytwelve-child/style.css,wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.6.pack.css
you have to change padding for div.site. You probably need to add !important clausule for this one, as this style is overwritten in couple other files
I have downloading the responsive framwework http://996grid.com/ and in the Normalize.css it has default settings of padding: 0 0 0 40px; for various items. for example
menu,
ol,
ul {
padding: 0 0 0 40px;
}
dd {
margin: 0 0 0 40px;
}
Can someone explain the reasoning of this as when I add a ul it adds 40px onto it... If I remove the 40px in the normalize will it effect browser support?
Thanks for your help
In the official Normalize.css (available at https://github.com/necolas/normalize.css/), there is no such padding, however most browsers will add this padding anyway to simply give the list some indentation from regular text.
If you want to remove this, simply modify the provided CSS or override it within your own CSS:
menu,
ol,
ul {
padding: 0;
}
dd {
margin: 0;
}
It's up to you to style your own documents however you like; aside from the default styles defined in the HTML specification, most browser default styles are simply there to make simple unstyled documents a bit prettier.
According to Erik Meyer it's a remnant from Mosaic. He said it at the end of Web Platform podcast episode 139
I am working on a very annoying bug. The problem is that it happens only in Internet Explorer (I use IE 10). When I try to select the content of a div tag an extra space is added at the end of my selection. Still, Internet explorer has this option for switching the compatibility mode and if I use the extra space will not be there any more. Is there any .css or .cshtml trick I could use for my MVC4 view?
HTML :
<div class="display"> "text" </div>
CSS :
.display {
margin: 0.1em 0 0 0;
border: 0.1em 0 0;
width: 320px;
}
I'm assuming that by selecting you mean when you highlight and copy manually from within the browser
The html you provided, the actual content of the div is [space]text[space]
Chrome appears to be clever and excludes the trailing space. IE, on the other hand, copies the value verbatim
Try removing the spaces surrounding the text - if you require them for your styling, try adding some padding instead
.display {
padding: 1px;
margin: 0.1em 0 0 0;
border: 0.1em 0 0;
width: 320px;
}
I have some CSS for a Wordpress blog. I want paragraphs to indent, but blocks of code to align left to the margin. This is the code that I have---all of these elements appear with a <div class="postContent" tag, and Wordpress automatically wraps post text blocks in <p> tags.
First, I've set all paragraphs within the div tags to indent:
.postContent p {
font-size: 1.2em;
text-indent: 2.5em;
text-align: justify;
line-height: 1.6em;
margin: 1em;
}
Then, Wordpress sets aside the first paragraph as a .lead paragraph. I want that to indent, provided it's not code:
.postContent p.lead code {
margin: 0;
text-indent: 0;
}
That works just fine. However, all the other code paragraphs are still indenting, so I added this to the stylesheet:
.postContent p code {
text-indent: 0;
padding: 0;
padding-top: 2em;
padding-bottom: 2em;
}
No dice. The code blocks are still indenting according to the .postContent p rule.
Setting text-indent on a code element inside a p element does not affect the indentation of the p element. It does not affect anything, really, since text-indent applies to block containers only.
If the markup is <p><code>...</code></p> so that the p contains nothing but the code, you can add
.postContent p code { display: block; }
and then consider what to do with vertical spacing, which may be a bit excessive after the addition (namely margins of p plus padding of code).
It's really hard to say without seeing both the source for the html and the actual css code, but I'm guessing your styles are being overridden by a more specific style.
The best thing for you to do is install Firebug in Firefox (really, the best development tools for a browser, IMHO) and inspect the targeted elements. The inspector should display all the styles being applied to the element. The overridden styles will have a strikethrough it. If you see they are being overridden, make your styles more specific. Otherwise, if you don't see your style listed, then you're not correctly targeting it.
Hope that helps. Good luck.