2个DIV元素之间的垂直空白
[英]Vertical white space between 2 DIV elements
问题描述
I have 4 DIVs and I need them all to be sticked together. 
我有4个DIV，我需要将它们全部粘在一起。 I have a white space between and only between first 2 DIVs and I don't know why . 我在前两个DIV之间只有一个空白，我不知道为什么 。 Any advices and a possible explanation? 有什么建议和可能的解释吗？ I don't have any padding of so, making this quite annoying. 我没有这样的填充，这很烦人。
@font-face { font-family: FONT; src: url(Montserrat-Regular.ttf); } p.title1 { font-size: 2.5em; } p.title2 { font-size: 3em; } div.surf1 { display: block; /*background-image: url("surf1.jpg");*/ background: #41c3ac; background-position: center; background-size: cover; height: 600px; } div.surf2 { display: block; background: #41c3ac; height: 600px; } div.surf3 { display: block; background: #ff6b57; height: 600px; } div.surf4 { display: block; background: #8C78B1; height: 600px; } div.text1 { padding-top: 100px; color: white; text-align: center; font-size: 2.5em; } div.button { text-align: center; font-size: 1.5em; margin: 0 auto; width: 15%; padding: 8px; border: 2px solid; border-color: #e7dd84; background-color: rgba(236, 229, 167, 0.2); color: #e7dd84; transition: 0.35s; } div.button:hover { background-color: white; color: black; border-color: white; transition: 0.35s; } body { margin: 0; font-family: FONT; color: white; }
<!doctype html> <html> <head> <title>Welcome</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <div class="surf1"> <div class="text1"> <b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b> </div> <br> <br> <br> <br> <br> <div class="button"> Go to site </div> </div> <div class="surf2"> <p class="title1">Interractive games</p> <ul style="font-size: 1.5em"> <li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li> <li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li> </ul> </div> <div class="surf3"></div> <div class="surf4"></div> <body> </body> </html>
3 个解决方案
解决方案1
3 已采纳 2016-01-05 18:36:27
The default margin-top on the nested p element is collapsing vertically , which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space). 嵌套p元素的默认margin-top 垂直折叠 ，这实际上在父.surf2元素上创建了相等的margin-top （这就是为什么看到空格的原因）。
According to the spec , this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible . 根据规范 ，如果您建立新的块格式化上下文，则不会发生这种情况，这意味着一个选项是将.surf2元素的overflow设置为默认值visible以外的其他值。 Changing it to auto or hidden would resolve the issue. 将其更改为auto或hidden可以解决该问题。
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
@font-face { font-family: FONT; src: url(Montserrat-Regular.ttf); } p.title1 { font-size: 2.5em; } p.title2 { font-size: 3em; } div.surf1 { display: block; /*background-image: url("surf1.jpg");*/ background: #41c3ac; background-position: center; background-size: cover; height: 600px; } div.surf2 { display: block; background: #41c3ac; height: 600px; overflow: auto; } div.surf3 { display: block; background: #ff6b57; height: 600px; } div.surf4 { display: block; background: #8C78B1; height: 600px; } div.text1 { padding-top: 100px; color: white; text-align: center; font-size: 2.5em; } div.button { text-align: center; font-size: 1.5em; margin: 0 auto; width: 15%; padding: 8px; border: 2px solid; border-color: #e7dd84; background-color: rgba(236, 229, 167, 0.2); color: #e7dd84; transition: 0.35s; } div.button:hover { background-color: white; color: black; border-color: white; transition: 0.35s; } body { margin: 0; font-family: FONT; color: white; }
<!doctype html> <html> <head> <title>Welcome</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <div class="surf1"> <div class="text1"> <b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b> </div> <br> <br> <br> <br> <br> <div class="button"> Go to site </div> </div> <div class="surf2"> <p class="title1">Interractive games</p> <ul style="font-size: 1.5em"> <li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li> <li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li> </ul> </div> <div class="surf3"></div> <div class="surf4"></div> <body> </body> </html>
That's just one work around. 这只是一个解决方法。 See the spec for the specific rules relating to collapsing margins. 请参阅规格以了解与利润下降有关的特定规则。 You could also simply remove the margin from the p element. 您也可以简单地从p元素中删除边距。
解决方案2
1 2016-01-05 18:36:19
You need to set the class="title1" margin to 0px. 您需要将class="title1"边距设置为0px。 -> margin: 0; -> margin: 0;
解决方案3
1 2016-01-05 18:37:41
For all your surf# classed elements, set their overflow to auto . 对于所有您的surf#分类元素，将其溢出设置为auto 。
It appears that the margin on the children on the 2nd div is pushing the first div up. 看来第二个div子级上的边距正在将第一个div向上推。
I recommend either adding a unifying class to those elements or use this rule: 我建议向这些元素添加统一类或使用以下规则：
[class^="surf"] {
overflow: auto;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.