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.
I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block
is the default display value for the div
, but I like to make it explicit. The container has to be the right type; position
attribute is fixed
, relative
, or absolute
.
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
margin-bottom:20px;
margin-right:80px;
margin-left:80px;
background-color: green;
}
<div class="stretchedToMargin">
Hello, world
</div>
Fiddle by Nooshu's comment
Best Answer
Depending on what browsers you need to support you could use the
flex-box
. Using a media query for screen size you could then set theorder
of the second and third boxes to switch below a certain screen width.I've done a pen with a short example. I'd also recommend the CSS Tricks Complete Guide to Flexbox which talks about how to use
flex
far better than I can.EDIT:
The basic principle would be to set the parent element (e.g., container) to
display: flex
; this generates the flexbox and allows you to set different parameters for the children.Using the following HTML:
If I set
display:flex
on.container
, I can then set whether the content should display in a row or column, should wrap down a line, have space between or around the elements, etc. I've set the main rule to be a wrapping row using flex-flow (which is a shorthand for two other flex properties, includingflex-direction
which I need later), with space between the elements.I then use a media query so when the browser is narrower than a specified width, the
flex-direction
gets changed fromrow
tocolumn
Then, in the same media query, I need to tell the elements that I want to re-order what order they should be in:
Sometimes I've noticed that
order
needs to be defined for all the elements, so you might need to set it for the first block and keep it asorder: 1
. From the pen linked to above, it doesn't seem to be the case here, but it something to keep an eye out for in other projects.