Home  >  Article  >  Web Front-end  >  Why is it not based on the TOP boundary of the outer DIV? _html/css_WEB-ITnose

Why is it not based on the TOP boundary of the outer DIV? _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:26:13950browse



The above is the initial state.
These are two DIVs. Why does my setting of margin-top on the inside one affect the margin-top of the outside DIV?


Reply to discussion (solution)

For block-level elements, margins overlap. You can add a 1px padding to the outer div and this problem will not occur.

If you are interested, you can check out: http://blog.csdn.net/zyl_lyr1019/article/details/14215355

For block-level elements, margins are overlaid. You can add a 1px padding to the outer div and this problem will not occur.

If you are interested, you can check it out: http://blog.csdn.net/zyl_lyr1019/article/details/14215355
Why is it enough to add 1px padding value to the outer div?

As I said, the margins are superimposed. Why do you only look at the solutions given and not the reasons?

3rd floor zyl_lyr1019 When you see me, add me Q35787463 and I have something to ask...

3rd floor zyl_lyr1019 When you see me and you add me Q35787463 and I have something to ask... If you have anything, just say it directly, just forget it on QQ.

3rd floor zyl_lyr1019 See me and add me Q35787463. I have something to ask... The calendar problem you helped me solve in the past two days has some problems. I can’t explain it.


Block level Element's, margins overlap. You can add a 1px padding to the outer div and this problem will not occur.

If you are interested, you can check it out: http://blog.csdn.net/zyl_lyr1019/article/details/14215355
Why is it enough to add 1px padding value to the outer div?



For block-level elements, margins overlap. You can add a 1px padding to the outer div and this problem will not occur.

If you are interested, you can check it out: http://blog.csdn.net/zyl_lyr1019/article/details/14215355
Why is it enough to add 1px padding value to the outer div?
I read the article you mentioned, but it didn’t explain the reason, it just pointed out this phenomenon. The reason was not stated.

http://www.w3school.com.cn/css/pr_margin.asp

The top and bottom will overlap, which is how it should be. Read the W3C description carefully.

W3C: Vertically adjacent margins of block-level elements merge, while inline elements actually occupy no top or bottom margins. The left and right margins of inline elements are not merged. Likewise, the margins of floated elements are not merged. It is allowed to specify negative margin values, but use caution when using them.

In W3C, there is such a description directly, and the reason must be explained. I was just thinking about the circumstances under which margins would be superimposed.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn