2個DIV元素之間的垂直空白
[英]Vertical white space between 2 DIV elements
問題描述
我有4個DIV，我需要將它們全部粘在一起。 我在前兩個DIV之間只有一個空白，我不知道為什么 。 有什么建議和可能的解釋嗎？ 我沒有這樣的填充，這很煩人。
@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
嵌套p元素的默認margin-top 垂直折疊 ，這實際上在父.surf2元素上創建了相等的margin-top （這就是為什么看到空格的原因）。
根據規范 ，如果您建立新的塊格式化上下文，則不會發生這種情況，這意味着一個選項是將.surf2元素的overflow設置為默認值visible以外的其他值。 將其更改為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>
這只是一個解決方法。 請參閱規格以了解與利潤下降有關的特定規則。 您也可以簡單地從p元素中刪除邊距。
解決方案2
1 2016-01-05 18:36:19
您需要將class="title1"邊距設置為0px。 -> margin: 0;
解決方案3
1 2016-01-05 18:37:41
對於所有您的surf#分類元素，將其溢出設置為auto 。
看來第二個div子級上的邊距正在將第一個div向上推。
我建議向這些元素添加統一類或使用以下規則：
[class^="surf"] {
overflow: auto;
}
div元素之間的空白
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.