Vertical white space between 2 DIV elements
Question
I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why . 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 answers
solution1
3 ACCPTED 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).
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 . Changing it to auto or hidden would resolve the issue.
.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.
solution2
1 2016-01-05 18:36:19
You need to set the class="title1" margin to 0px. -> margin: 0;
solution3
1 2016-01-05 18:37:41
For all your surf# classed elements, set their overflow to auto .
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.