display:none
means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
visibility:hidden
means that unlike display:none
, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
For example:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
Replacing [style-tag-value]
with display:none
results in:
test | | test
Replacing [style-tag-value]
with visibility:hidden
results in:
test | | test
Basics
For controlling "cellpadding" in CSS, you can simply use padding
on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing
CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".
Issues in IE ≤ 7
This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse
property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0"
) then border-collapse:collapse
should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing
HTML attribute on the table element.
In short: for non-Internet Explorer 5-7 browsers, border-spacing
handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.
Best Answer
I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use
clear: both;
OR what doesclear: both;
exactly do...I'll keep this answer simple, and to the point, and will explain to you graphically why
clear: both;
is required or what it does...Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.
Why do they float elements?
Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...
Live Example of the demo image.
Code For Demo
Note: You might have to add
header
,footer
,aside
,section
(and other HTML5 elements) asdisplay: block;
in your stylesheet for explicitly mentioning that the elements are block level elements.Explanation:
I have a basic layout, 1 header, 1 side bar, 1 content area and 1 footer.
No floats for
header
, next comes theaside
tag which I'll be using for my website sidebar, so I'll be floating the element to left.So as you note, the left floated
div
leaves the space to its right unused, which will allow thediv
after it to shift in the remaining space.div
's will render one after the other if they are NOT floateddiv
will shift beside each other if floated left or rightOk, so this is how block level elements behave when floated left or right, so now why is
clear: both;
required and why?So if you note in the layout demo - in case you forgot, here it is..
I am using a class called
.clear
and it holds a property calledclear
with a value ofboth
. So lets see why it needsboth
.I've floated
aside
andsection
elements to the left, so assume a scenario, where we have a pool, whereheader
is solid land,aside
andsection
are floating in the pool and footer is solid land again, something like this..So the blue water has no idea what the area of the floated elements are, they can be bigger than the pool or smaller, so here comes a common issue which troubles 90% of CSS beginners: why the background of a container element is not stretched when it holds floated elements. It's because the container element is a POOL here and the POOL has no idea how many objects are floating, or what the length or breadth of the floated elements are, so it simply won't stretch.
(Refer [Clearfix] section of this answer for neat way to do this. I am using an empty
div
example intentionally for explanation purpose)I've provided 3 examples above, 1st is the normal document flow where
red
background will just render as expected since the container doesn't hold any floated objects.In the second example, when the object is floated to left, the container element (POOL) won't know the dimensions of the floated elements and hence it won't stretch to the floated elements height.
After using
clear: both;
, the container element will be stretched to its floated element dimensions.Another reason the
clear: both;
is used is to prevent the element to shift up in the remaining space.Say you want 2 elements side by side and another element below them... So you will float 2 elements to left and you want the other below them.
div
Floated left resulting insection
moving into remaining spacediv
cleared so that thesection
tag will render below the floateddiv
s1st Example
2nd Example
Last but not the least, the
footer
tag will be rendered after floated elements as I've used theclear
class before declaring myfooter
tags, which ensures that all the floated elements (left/right) are cleared up to that point.Clearfix
Coming to clearfix which is related to floats. As already specified by @Elky, the way we are clearing these floats is not a clean way to do it as we are using an empty
div
element which is not adiv
element is meant for. Hence here comes the clearfix.Think of it as a virtual element which will create an empty element for you before your parent element ends. This will self clear your wrapper element holding floated elements. This element won't exist in your DOM literally but will do the job.
To self clear any wrapper element having floated elements, we can use
Note the
:after
pseudo element used by me for thatclass
. That will create a virtual element for the wrapper element just before it closes itself. If we look in the dom you can see how it shows up in the Document tree.So if you see, it is rendered after the floated child
div
where we clear the floats which is nothing but equivalent to have an emptydiv
element withclear: both;
property which we are using for this too. Now whydisplay: table;
andcontent
is out of this answers scope but you can learn more about pseudo element here.Note that this will also work in IE8 as IE8 supports
:after
pseudo.Original Answer:
Most of the developers float their content left or right on their pages, probably divs holding logo, sidebar, content etc., these divs are floated left or right, leaving the rest of the space unused and hence if you place other containers, it will float too in the remaining space, so in order to prevent that
clear: both;
is used, it clears all the elements floated left or right.Demonstration:
Now what if you want to make the other div render below
div1
, so you'll useclear: both;
so it will ensure you clear all floats, left or right