Padding & Spacing
Write CSS for eight pixels of cell padding with no gap between shared borders.
Understand the topic
Cell padding is the space between cell content and its border. Border spacing is the space between separate cell borders. These solve different problems. border-spacing applies when borders are separate; collapsed borders do not retain that gap. Adequate padding improves scanning, while excessive spacing can make related values feel disconnected.
Worked example
<style>table { border-collapse: separate; border-spacing: 6px; } th, td { padding: 12px; }</style><table><caption>Workshop places</caption><thead><tr><th scope="col">Class</th><th scope="col">Places</th></tr></thead><tbody><tr><th scope="row">HTML</th><td>12</td></tr><tr><th scope="row">CSS</th><td>8</td></tr></tbody></table>Padding makes each cell roomier. Separate borders allow the six-pixel gap between cells to be visible.
Practice
Write CSS for eight pixels of cell padding with no gap between shared borders.
Show a suggested answer
table { border-collapse: collapse; }
th, td { padding: 8px; }Common mistake
Do not confuse padding with border-spacing. Changing one does not necessarily change the other.