CSS margin - cells vs paragraphs


#1

EDIT: swapped out the sample text to avoid copyright issue
Hi all,
I’m trying to understand the logic behind margins in CSS. I understand how, for certain elements such as paragraphs, margin inserts whitespace around the outer edge of the element’s box so that no adjacent elements come within x-number of pixels. I don’t understand why table cell (td) margins don’t work the same way. Am I completely misunderstanding the function of a margin? Is my CSS/HTML wrong? Is this just a quirk of CSS?

Here is my sample. Warning: mangled indentation ahead.

<!DOCTYPE html>
<html>
        <head>
                <style type="text/css">
                p {
                        margin: 20px;
                        padding: 10px;
                        border-width: thick;
                        border-style: solid;
                        border-color: #CC9966;
}
                </style>
        </head>
        <body>
                <table>
                        <tr>
                                <td>
                <p>I am by birth a Genevese, and my family is one of the most
distinguished of that republic.  My ancestors had been for many years
counsellors and syndics, and my father had filled several public
situations with honour and reputation.  He was respected by all who
knew him for his integrity and indefatigable attention to public
business.  He passed his younger days perpetually occupied by the
affairs of his country; a variety of circumstances had prevented his
marrying early, nor was it until the decline of life that he became a
husband and the father of a family.
                                </td>
<td>
<p>As the circumstances of his marriage illustrate his character, I cannot
refrain from relating them.  One of his most intimate friends was a
merchant who, from a flourishing state, fell, through numerous
mischances, into poverty.  This man, whose name was Beaufort, was of a
proud and unbending disposition and could not bear to live in poverty
and oblivion in the same country where he had formerly been
distinguished for his rank and magnificence.  Having paid his debts,
therefore, in the most honourable manner, he retreated with his
daughter to the town of Lucerne, where he lived unknown and in
wretchedness.  My father loved Beaufort with the truest friendship and
was deeply grieved by his retreat in these unfortunate circumstances.
He bitterly deplored the false pride which led his friend to a conduct
so little worthy of the affection that united them.  He lost no time in
endeavouring to seek him out, with the hope of persuading him to begin
the world again through his credit and assistance.</p>

                                </td>
                                <td>
                                        <p>Beaufort had taken effectual measures to conceal himself, and it was ten
months before my father discovered his abode. Overjoyed at this discovery,
he hastened to the house, which was situated in a mean street near the
Reuss. But when he entered, misery and despair alone welcomed him. Beaufort
had saved but a very small sum of money from the wreck of his fortunes, but
it was sufficient to provide him with sustenance for some months, and in
the meantime he hoped to procure some respectable employment in a
merchant’s house. The interval was, consequently, spent in inaction;
his grief only became more deep and rankling when he had leisure for
reflection, and at length it took so fast hold of his mind that at the end
of three months he lay on a bed of sickness, incapable of any exertion.</p>
                        </tr>
                        <tr>
                                <td>
                <p>His daughter attended him with the greatest tenderness, but she saw
with despair that their little fund was rapidly decreasing and that
there was no other prospect of support.  But Caroline Beaufort
possessed a mind of an uncommon mould, and her courage rose to support
her in her adversity.  She procured plain work; she plaited straw and
by various means contrived to earn a pittance scarcely sufficient to
support life.
                                </td>
<td>
<p>Several months passed in this manner.  Her father grew worse; her time
was more entirely occupied in attending him; her means of subsistence
decreased; and in the tenth month her father died in her arms, leaving
her an orphan and a beggar.  This last blow overcame her, and she knelt
by Beaufort’s coffin weeping bitterly, when my father entered the
chamber.  He came like a protecting spirit to the poor girl, who
committed herself to his care; and after the interment of his friend he
conducted her to Geneva and placed her under the protection of a
relation.  Two years after this event Caroline became his wife..</p>

                                </td>
                                <td>
                                        <p>There was a considerable difference between the ages of my parents, but
this circumstance seemed to unite them only closer in bonds of devoted
affection.  There was a sense of justice in my father’s upright mind
which rendered it necessary that he should approve highly to love
strongly.  Perhaps during former years he had suffered from the
late-discovered unworthiness of one beloved and so was disposed to set
a greater value on tried worth.  There was a show of gratitude and
worship in his attachment to my mother, differing wholly from the
doting fondness of age, for it was inspired by reverence for her
virtues and a desire to be the means of, in some degree, recompensing
her for the sorrows she had endured, but which gave inexpressible grace
to his behaviour to her.  Everything was made to yield to her wishes
and her convenience.  He strove to shelter her, as a fair exotic is
sheltered by the gardener, from every rougher wind and to surround her
with all that could tend to excite pleasurable emotion in her soft and
benevolent mind.  Her health, and even the tranquillity of her hitherto
constant spirit, had been shaken by what she had gone through.  During
the two years that had elapsed previous to their marriage my father had
gradually relinquished all his public functions; and immediately after
their union they sought the pleasant climate of Italy, and the change
of scene and interest attendant on a tour through that land of wonders,
as a restorative for her weakened frame.</p>
                        </tr>
        </body>
</html>

<!DOCTYPE html>
<html>
        <head>
                <style type="text/css">
                td {
                        margin: 20px;
                        padding: 10px;
                        border-width: thick;
                        border-style: solid;
                        border-color: #CC9966;
                }
                </style>
        </head>
                <body>
                <table>
                        <tr>
                                <td>
                <p>I am by birth a Genevese, and my family is one of the most
distinguished of that republic.  My ancestors had been for many years
counsellors and syndics, and my father had filled several public
situations with honour and reputation.  He was respected by all who
knew him for his integrity and indefatigable attention to public
business.  He passed his younger days perpetually occupied by the
affairs of his country; a variety of circumstances had prevented his
marrying early, nor was it until the decline of life that he became a
husband and the father of a family.
                                </td>
<td>
<p>As the circumstances of his marriage illustrate his character, I cannot
refrain from relating them.  One of his most intimate friends was a
merchant who, from a flourishing state, fell, through numerous
mischances, into poverty.  This man, whose name was Beaufort, was of a
proud and unbending disposition and could not bear to live in poverty
and oblivion in the same country where he had formerly been
distinguished for his rank and magnificence.  Having paid his debts,
therefore, in the most honourable manner, he retreated with his
daughter to the town of Lucerne, where he lived unknown and in
wretchedness.  My father loved Beaufort with the truest friendship and
was deeply grieved by his retreat in these unfortunate circumstances.
He bitterly deplored the false pride which led his friend to a conduct
so little worthy of the affection that united them.  He lost no time in
endeavouring to seek him out, with the hope of persuading him to begin
the world again through his credit and assistance.</p>

                                </td>
                                <td>
                                        <p>Beaufort had taken effectual measures to conceal himself, and it was ten
months before my father discovered his abode. Overjoyed at this discovery,
he hastened to the house, which was situated in a mean street near the
Reuss. But when he entered, misery and despair alone welcomed him. Beaufort
had saved but a very small sum of money from the wreck of his fortunes, but
it was sufficient to provide him with sustenance for some months, and in
the meantime he hoped to procure some respectable employment in a
merchant’s house. The interval was, consequently, spent in inaction;
his grief only became more deep and rankling when he had leisure for
reflection, and at length it took so fast hold of his mind that at the end
of three months he lay on a bed of sickness, incapable of any exertion.</p>
                        </tr>
                        <tr>
                                <td>
                <p>His daughter attended him with the greatest tenderness, but she saw
with despair that their little fund was rapidly decreasing and that
there was no other prospect of support.  But Caroline Beaufort
possessed a mind of an uncommon mould, and her courage rose to support
her in her adversity.  She procured plain work; she plaited straw and
by various means contrived to earn a pittance scarcely sufficient to
support life.
                                </td>
<td>
<p>Several months passed in this manner.  Her father grew worse; her time
was more entirely occupied in attending him; her means of subsistence
decreased; and in the tenth month her father died in her arms, leaving
her an orphan and a beggar.  This last blow overcame her, and she knelt
by Beaufort’s coffin weeping bitterly, when my father entered the
chamber.  He came like a protecting spirit to the poor girl, who
committed herself to his care; and after the interment of his friend he
conducted her to Geneva and placed her under the protection of a
relation.  Two years after this event Caroline became his wife..</p>

                                </td>
                                <td>
                                        <p>There was a considerable difference between the ages of my parents, but
this circumstance seemed to unite them only closer in bonds of devoted
affection.  There was a sense of justice in my father’s upright mind
which rendered it necessary that he should approve highly to love
strongly.  Perhaps during former years he had suffered from the
late-discovered unworthiness of one beloved and so was disposed to set
a greater value on tried worth.  There was a show of gratitude and
worship in his attachment to my mother, differing wholly from the
doting fondness of age, for it was inspired by reverence for her
virtues and a desire to be the means of, in some degree, recompensing
her for the sorrows she had endured, but which gave inexpressible grace
to his behaviour to her.  Everything was made to yield to her wishes
and her convenience.  He strove to shelter her, as a fair exotic is
sheltered by the gardener, from every rougher wind and to surround her
with all that could tend to excite pleasurable emotion in her soft and
benevolent mind.  Her health, and even the tranquillity of her hitherto
constant spirit, had been shaken by what she had gone through.  During
the two years that had elapsed previous to their marriage my father had
gradually relinquished all his public functions; and immediately after
their union they sought the pleasant climate of Italy, and the change
of scene and interest attendant on a tour through that land of wonders,
as a restorative for her weakened frame.</p>
</td>
                        </tr>
</td>
        </body>
</html>


#2

Margins are not applicable to table cells.
You can use border-spacing and border-collapse to apply that spacing you want to the display:table elements:
Example:

.table {
        display:table;
        border-collapse:separate;
        border-spacing: 10px;
        }

To understand more about how margins collapse, read this:


Also, I always say this: if you master CSS layout, you master all of the CSS.
I strongly recommend Rachel Andrew’s Layout course.
It includes all the old and new techniques:
https://thecssworkshop.com/


#3

Thanks @io_io. This is way beyond the old days of using nested tables to do layout. It looks like there’s a lot for me to learn. Thank you for the course link. Once I finish this book, I’m definitely going to give that one a try.