After successfully creating four equi-sized/quadrants on my page using the solution found here, I now want to give them some breathing room.
The current layout looks like this:
https://i.sstatic.net/8acjm.png
I attempted adding margin and padding to the quadrant classes, but it didn't have the desired effect. Adding margin between them caused a vertical alignment issue, while padding seemed to inflate the quadrants rather than create space around them.
Here is the complete HTML/CSS code for reference:
<!DOCTYPE html>
<html lang="en">
...
</style>
</head>
<body>
<div class="contents">
...
<td>Item Code 10</td>
<td>Description 10</td>
<td>Qty 10</td>
</tr>
</table>
</div>
...
<table>
...
<tr>
<td>Unit 7</td>
<td>Co. Name 7</td>
<td>Desc 7</td>
<td>40</td>
<td>39</td>
<td>1</td>
</tr>
...
</div>
</body>
</html>
UPDATE
Despite trying different methods, such as adjusting padding or margin values, I still struggle to achieve the desired spacing between the quadrants. Padding seems to expand them, while margin causes an awkward vertical stacking of the quadrants. What am I missing here?