Remove the two-end margin

Suppose there is a visual draft, one part of which is implemented as follows:

Two rows of Horizontally arranged boxes with margins in the middle,Distance between two ends. The size of each frame is 100*100, the outer margin is 20, and the whole area is 460*220.

HTML structure:

There are three ways to solve the extra margin problem.

{:;:;:;}{:;:;:;:;}{:;:;:;:;:;:;:;}{:;}

In the top and bottom margins, I chose to add the bottom margin. In the outermost div, I set the height and overflow: hidden, so the extra bottom margins are hidden; the Processing Method of the left and right margins is to add a class = first in the first li of each row, and process this first separately.

This is a common practice that can be seen in the structure of many websites.

Disadvantages: you need to set the first or last element of each row separately. If there are many rows, you need to process many rows and add one more class.

Method 2:

You do not need to make any changes on the HTML, or add a class, set the height and width of the outermost div, ul adds 20 PXLeft negative margin.

{:;:;:;}{:;:;:;:;:;}{:;:;:;:;:;:;:;}

Method 3:

ToUl widening(The added width must be greater than or equal to the li margin, and smaller than the li width, so that the ul width can accommodate more than one margin, and will not squeeze up the li of the next line ), set overflow: hidden for the outermost div,Li sets the right margin.

{:;:;:;}{:;:;:;:;:;}{:;:;:;:;:;:;:;}

 

 

Thank you for your criticism.