Firstly, i'm new to both HTML and css, so don't be too hash. I have a large header div that I wish to place it flush at the top of the screen, however, there appears to be space of about 10px which I can't remove.
HTML
<div class="wrapper"></div>
CSS
.wrapper{width:300px; background-color: red; height: 300px; margin: 0; padding: 0;}
If you're new to CSS and stuff,
you need to know that the browser applies styles to elements by default.
Like for example to Headings the font-size and font-weight,
to context elements like i, b, span other properties like display inline,
and to DIV elements the display:block; etc...
if you take a look at THIS LIST you'll see that 8px are added to the body element.
If you're happy with the styles the browser adds by default to your elements than all you need is
body{
margin:0; /* to remove the 8px default */
}
otherwise if you're not happy at all, and you wish to have full control over the styles being applied to your elements you can use an Ugly Reset (for margin and padding urgency) using the Universal Selector *
*{ margin:0; padding:0; } /* Global reset. "*" is to target all elements. */
or Google for some Stylesheet Reset code like from: http://www.cssreset.com/
that will help you to control/reset the most of all other elements default styles.
You need to add that to the body as well. The DIV is inside the BODY.
Try setting
margin: 0;
padding: 0;
To the body and the html elements
Related
<html>
<head>
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<div class="textAreaWrapper">
<div class="textAreaWrapperPanel">
<h3 class='textblockheader'>Text Block Settings</h3>
</div>
</div>
</body>
</html>
This is my html code, and below is my css code:
.textAreaWrapper{
border: 1px solid black;
background-color: white;
}
.textAreaWrapperPanel{
background-color : #093459;
color: white;
margin-top:0px;
}
.textblockheader{
font-family : "Helvetica Neue,Helvetica,Arial,sans-serif";
font-size: 16px;
font-weight : normal;
}
I expect there will me no space between textAreaWrapperPanel and textAreaWrapper div elements, but instead, it still have. But if I change textblockheader's margin-top to 0px, its work, can anyone explain why this happen?
That's cause the browser applies to H3 elements (and other elements) a margin by default. DEMO
All you need is to use a CSS Reset
To quickly view an ugly rest just use
*{margin:0; padding:0;} /* will apply to all (*) elements */
http://meyerweb.com/eric/tools/css/reset/
http://yuilibrary.com/yui/docs/cssreset/
Regarding your concerns about **[Collapsing Margins][2]**:
*Why the blue background of the H3's parent DIV does not fully cover the space taken by the `H3` element?*
That's cause you're nesting two block-level elements: h3 into div, where the box models and natural floats are being handled by the browser unless specified like in this three solutions:
Set overflow:auto; to the parent div
Or set your H3 element as display: inline-block;
Use a clearfix for the block-level parent element
jsBin PLAYGROUND
/* // uncomment
*{margin:0;padding:0;}
*/
.textAreaWrapper{
border: 1px solid black;
background-color: white;
}
.textAreaWrapperPanel{
/* overflow:auto; */ /* Uncomment this or */
background-color : #093459;
color: white;
}
.textblockheader{
/* display:inline-block; */ /* ... this one or ...*/
font-family : "Helvetica Neue,Helvetica,Arial,sans-serif";
font-size: 16px;
font-weight : normal;
}
/* add this class to your DIV .textAreaWrapperPanel */
.clearfix:before,
.clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
Micro clearfix resource: http://nicolasgallagher.com/micro-clearfix-hack/
I think your problem is that they are already at 0 space between? The two divs both have the same background color and the inner one has no border. Try making the inner one a different color just to see. I bet it will have no upper margin. It's just your H3 tag that by default has a margin.
EDIT:
Sorry I misread your code. You are correct, they are different colors. Here is the WHY of what's going on. Your H3 element is by default presenting as a BLOCK level element. This causes it to have its own background margin that is set to 10px top and bottom. If you were to tell your H3 class textblockheader to:
display: inline;
It would cause it to remove the background area and margins as well without having to reset anything. As it stands the two divs are touching each other, but the white margin from your textblockheader class is adding extra space that gets the default margin color which is white.
But yeah, the reason it's doing that is the default css styling of H3 elements as block level elements with a default top and bottom margin.
The heading tags have default margins. This link might help:Default Heading Styles
Also resetting the default css values of tags may avoid similar future errors: Reset CSS
I write the next jsfiddle:
http://jsfiddle.net/alonshmiel/Ht6Ym/2409/
I try to put the ul in the left side:
I tried to do:
margin-left:0px;
float: left;
but it doesn't work.
any help appreciated!
You can add:
ul#advancedTargeting {
padding-left: 0;
}
Updated Fiddle
It's because some browsers has some default styles for HTML elements.
You can reset your padding-left value of your ul to default 0 using above code.
It's a good habit to use a css reset script to reset all the default styles applied by browsers to make your css compatible with various of browsers. You can find it from cssreset.com
You should set:
padding-left:0px;
http://www.w3schools.com/css/css_boxmodel.asp - check this to get a clear picture.
here is the solution, just use padding-left:0;
Your <ul> element is positioned as fixed and has a left: 55px; inline style.
Change that to left: 0; at first. Or avoid using fixed positioning if you don't want to remove the element from document normal flow (to get the float property to work).
Also, web browsers apply a left padding on the HTML list elements, such as <ul> and <ol>. You need to reset the padding as padding-left: 0.
However, it's better to reset all the default user agent stylesheets by using a CSS reset.
Either a tiny one:
* { padding: 0; margin: 0;}
Or a well-known version.
UPDATED DEMO.
On http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=none, a nice overview is provided for the different list-style-type values.
However, for the value none, it still reserves some horizontal space for the empty list symbol. Is there a way to remove this horizontal spacing, so that the text actually moves to the left as if it was no list? I would like to use text-align:center on the list items, and this horizontal spacing makes them not really centered. And I need to use <ul> because the CMS brings it in that way.
Basically, by default list-style-type:none does a visibility:hidden on the bullets, while I would like to achieve display:none on the bullets instead. What would be the proper way to do this?
It's the browsers default styling that's adding that space, just use a CSS reset to reset all of the browsers default styles. Most block elements have some default margin/padding .. even the <body> element has 8px of margin applied to it by default.
Here is a link to Eric Meyer's reset: http://meyerweb.com/eric/tools/css/reset/
Just to see for yourself, add:
ol {
margin: 0;
padding: 0;
}
/* This would be declared in the above reset */
Make sure to add browser reset styles before you start working with CSS.
You have to add this:
ol, li {
margin: 0px;
padding: 0px;
}
for this question.
A better way to this these days I found recently is to set the <ul> to display: contents;. Thus the css should look something like this:
ul {
list-style-type: none;
display: contents;
}
ul > li {
padding: 0;
margin: 0;
text-align: center;
}
This should do the trick.
add
margin:auto;
float:none;
display block; to your css for the ol element, this will remove the padding and align the elements in the centre
My Drupal theme generates:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
The results is that Field 2 has another style.
How can I remove the effects of h3 using CSS?
Better way - remove h3 tag. But sometimes, when you need to reset all styles of parent element - use global attributes, like "font" for "font-size", "font-style" and so on...
Warning of inheriting paddings, margins borders and background styles - this can be look ugly. For example, when your element has padding and border wiil duplicates for each element:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
http://jsfiddle.net/iegik/q72EM/
you can access the h3 as follows:
.field2 h3{ //style here }
This will change the style of any h3 inside an element with a class of field2. If you want to be extra specific:
div.field2 > h3 { //style here }
This will only change the style of an h3 element that is a first level descendant of a div with a class of field2. I would recommend you look into css selectors.
To remove any existing effects, you would have to overwrite them. This can be done by just setting the values back to the default for the element.
You can only "remove" the effects by setting properties to whatever value they had before the styles for <h3> get applied. For example you can reset the font size with
.field > h3 {
font-size: medium;
}
You will need to do this for all properties that get modified by your CSS or the browser's internal stylesheet, but there's help to be had: modern development tools (e.g. Chrome's) will allow you to inspect an element and show you what properties it has and where they came from (so you can see that font-size has been modified). Looking at the appropriate CSS standards will show you what the default value is for each of these properties (e.g. font-size is here).
you can easily edit like this :-
CSS
.field2 h3 {
color:red;
font-size:12px;
font-family:arial;
}
DEMO
Used to this
as like this
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3 element, the properties that are probably set in browser default style sheets are display, unicode-bidi, font-size, font-weight, margin, and page-break-after. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.
Are body properties and * properties different?
I always use body and html properties the same way. Can I use * properties with body and html?
And what should be different in * versus body properties?
I don't understand why it is necessary to use both these properties?
If I use one of them does it create any problems?
I use this
*{
margin:0;
padding:0;
background:#FFF;
}
and in body
body, html{
margin:0;
padding:0;
background:#FFF;
font:normal 12px verdana;
color:#0086ca;
}
when I use body, html it changes the background. When I remove background from * it didn't change bg color.
* (Asterisk) - It is a wildcard, this means it will select all elements within that portion of the DOM.
It's a universal rule which affect on every element.
for example:
Margin every element on the page
* {
margin: 10px;
}
All HTML components will have those attributes.
Body affects only on the body tag...The elements within the tag aren't affected - (they are not getting the same attributes.)
body applies to the <body> tag, while * applies to every tag. An example of the difference can be seen in the following:
body { margin: 2cm; }
versus
* { margin: 2cm; }
The first gives the body a margin – the second gives every element a margin.
On the other hand, the following code:
body { font-family: Courier; }
will change the font family in the whole document since CSS uses cascading styles, i.e. nested tags inherit certain style properties from their parents – in this case, the font.
Using * in CSS matches any element. Using it alone is rarely useful, because you will target every element in the page.
If you for have html code like this:
<html>
<head>
<title></title>
<style>
body { font-size: 50px; }
</style>
</head>
<body>
<div>
<form>
Name: <input type="text"/>
</form>
</div>
</body>
</html>
The font size set for the body will affect the text "Name:", but it will not affect the font size of the input element, as it has a specific size set by default.
If you now add the style * { border: 10px solid red; font-size: 100px; } this will put a border on the body, div, form and input elements, and both the text and the input element will get the font size.
The * selector is more useful in combination with other selectors, like selecting any child element to a specific element:
#Menu > * { float: left; }
Regarding what to use for the html and body element, you only need to set the margin, padding and background for the body element.