The understanding of margin:-10000px;padding:10000px;

Original link: http://javakid.blog.163.com/blog/static/191061094201221414057146/

The internal and external patch negative method refers to the setting of internal and external patches to solve some of the effects that our usual methods cannot achieve. For example: You can change the style of the box model to make several columns of div from the content of the height but a few columns of div and the highest column and other high problems. But why is this happening? First, to fully understand the margin and padding; some margin is the gap between modules and modules, and padding is the gap between the border and the content. When setting padding-bottom:10000px;margin-bottom:-10000px, the height of the box model is first enlarged by padding-bootom, and then by the Margin-bottom offset box model. At this point, padding can be used to open the outer label and margin does not have to open the outer label. That is, when padding-bottom:10000px to open the height of the outer label increased by 10000px, the outer label with Overflow:hidden, hide the extra height, so that it can be high with the highest column alignment, and margin is related to the module layout, margin : -10000px can offset the padding open box so that the layout can start from the Content section. So look at this question again:

Title One: two columns div parallel, one column fixed wide, another column div adaptive screen size of a problem;

This only needs to be set to one column wide the other column does not have a width set margin-left the negative size is the width of the other column. This does not require internal and external patches to cancel each other out of the way, here is the other two questions.

Two columns div parallel, left column content open width, right column width adaptive screen size. The head dizzy when doing the problem, has been turned on the first question, the result is very tragic. Come down to hear the classmate talk about thinking suddenly woke up.

The idea is: left column to open the width of the content, right column set margin-left:-10000px;padding-left:10000px; The result is what we need.

Title 3:3 Column Layout content open height but three columns are aligned with the highest column;

The idea is the same as the second question. Set margin-bottom:-10000px;padding-bottom:10000px;

Think about why you didn't do it when you started the question. The reason is because I don't understand the principle of negative margin to counteract padding. So in the use of the idea can't open. The internal and external patch negative value method is based on a deep understanding of the box model and margin, padding, otherwise we can only know it but do not know why, so flexible use is even more impossible. So in the future when doing an effect is not only to master the solution of the problem, but also to understand the principle of this method, or thinking.

The understanding of margin:-10000px;padding:10000px;