How to reduce vertical spacing between two web part zones?

Question

I've defined two Web Part Zones in the page layout, with nothing between them.

<WebPartPages:WebPartZone runat="server" Title="Zone 1" ID="Zone1" Orientation="Horizontal"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
<WebPartPages:WebPartZone runat="server" Title="Zone 2" ID="Zone2" Orientation="Horizontal"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

I've placed a CEWP in each zone. Once the page is out of edit mode, it renders like this:

How can I reduce the vertical spacing highlighted by the orange arrows?

Answer 1

I created /Style Library/CollapsedWebPartZones.css...

.CollapsedWebPartZones table.s4-wpTopTable { 
    padding: 0px; 
} 
.CollapsedWebPartZones table { 
    width: auto; 
}

... and referenced it from the top of my page layout file's PlaceHolderAdditionalPageHead content placeholder:

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
    <link id="CollapsedWebPartZonesStyleLink" href="<% $SPUrl:~SiteCollection/Style Library/CollapsedWebPartZones.css%>" runat="server" type="text/css" rel="stylesheet" />
    <etc>  
    <etc>  
    <etc>  
</asp:Content>

Lastly, I added a class="CollapsedWebPartZones" attribute to the markup element in the page layout which contained the web part zones (a table row in my case -- <tr>).

Result: