Thoughts on the "CSS Zen Garden"

1, the picture with tags added to the page, will increase the size of the page, resulting in the page load takes longer time. You can use CSS background to refer to a picture.

1.1. If the image is part of "content" rather than "style", such as "Company Profile" page, a photo of CEO, Apps Tags

2, do not use the table layout, each time the page loads, the browser must reload the various content, and redraw it. With CSS, these layout information can be cached in the browser. Zen Garden Works, the code that applies the picture needs to be loaded only once.

3. Margin overlap (collapsing margin)

If two elements are next to each other and define a non-zero margin, without any padding, border, and so on, the distance between the two elements is less than the sum of the two margins.

Prevent margin overlap solution: 1: Set padding break production overlap conditions (Zen garden recommended)

Another online collection of solutions are as follows:

1. outer element padding instead of
2. Inner element transparent border border:1px solid transparent;
3. Inner element Absolute Positioning Postion:absolute:
4. outer element Overflow:hidden;
5. inner element plus float:left; or display:inline-block;
6. Inner layer element padding:1px;

Thoughts on the "CSS Zen Garden"