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
After having the same issue, I got confused with all the answers here and the comments over the repository of sass in github.
I just want to point out that as December 2014, this issue has been resolved. It is now possible to import
css
files directly into your sass file. The following PR in github solves the issue.The syntax is the same as now -
@import "your/path/to/the/file"
, without an extension after the file name. This will import your file directly. If you append*.css
at the end, it will translate into thecss
rule@import url(...)
.In case you are using some of the "fancy" new module bundlers such as webpack, you will probably need to use use
~
in the beginning of the path. So, if you want to import the following pathnode_modules/bootstrap/src/core.scss
you would write something like@import "~bootstrap/src/core"
.NOTE:
It appears this isn't working for everybody. If your interpreter is based on
libsass
it should be working fine (checkout this). I've tested using@import
on node-sass and it's working fine. Unfortunately this works and doesn't work on some ruby instances.