[HTML] Unmasking HTML Emails

1. Clients and Markup
- Images need to have absolute URLs
- Styling the element with inline styles

2. Table for Layout
- Reset default spacing
<table border="0" cellpadding="0" cellspacing="0">
- Elements need to be seperated into rows and cells
- Use padding to seperate content

3. Mucho Media Queries

4. Targeting Specific Clients
- Correct line height with a vendor property
<!--[if gte mso 12[>
<style>
td {
mso-line-height-rule: exactly;
}
</style>
<![endif]-->

- Clipping can occur on inline elements
>> The Word preprocessor ignores line height on inline elements.

- Outlook 2013 and empty cells
>> &nbsp; 를 써줘야 임의 height 값이 생기지 않는다.

- Outlook 2013 applies line height to images
>> Font size and line height need to be set to the height of the image to avoid gaps.

- Some clients force a minimum font size
>> Apple adjusted to 14px

- Overriding client minimum font size
>> Vendor-specific properties exist to override defaults
[-ms-text-size-adjust: none;]
[-webkit-text-size-adjust:none;]

5. Small Screen First
- Problem: Outlook.com removes "margin"

>> Margin: 0 auto;

<!-- [if mso|(IE)]>

...

<![endif]-->

- display:inline-block 이 세로로 쌓일 때 약간의 공백이 생기는데, 이를 해결하기 위해서는 <div style="font-size:0;"></div>로 감싼다.