Why is vertical spacing eliminated when block elements are wrapped with div?

@shakozzzMay 19.2020

I have a reset button inside two nested div elements. If I set the button’s display property to block, the inner div wraps nicely around the button. However, if I leave the button as inline, the inner div stretches vertically.
I understand that block elements cause a line break before and after, but this alone doesn’t explain to me this behavior with the spacing.
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-05-19/1589895863-771658-image.png]
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-05-19/1589896121-15450-image.png]

I appreciate any insights as well as resources you could point me towards!
I’ve posted the [full code](https://codepen.io/shakozzz/pen/bGVObOZ) on Codepen.

to post a comment

CSS HTML

6 Comments(s) _↴

@VITSUSAMay 20.2020 — #Can you please share the snapshot of coding? It will more helpful to us to understand the exact problem.

@shakozzzauthorMay 21.2020 — #Oh, I thought hosting the code on Code Pen would be nicer, but sure. Here you go :)

HTML

``&lt;!DOCTYPE html&gt;<i>
 </i>&lt;html lang="en"&gt;
 
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;Rock Paper Scissors!&lt;/title&gt;
 &lt;link rel="stylesheet" href="styles.css"&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;header&gt;
 &lt;h1&gt;
 Rock Paper Scissors
 &lt;/h1&gt;
 &lt;/header&gt;
 &lt;div class="score-board"&gt;
 &lt;div class="badge" id="user-label"&gt;user&lt;/div&gt;
 &lt;div class="badge" id="comp-label"&gt;comp&lt;/div&gt;
 &lt;span id="user-score"&gt;0&lt;/span&gt;:&lt;span id="comp-score"&gt;0&lt;/span&gt;
 &lt;div class="reset-button"&gt;
 &lt;button type="reset"&gt;reset&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="result"&gt;
 &lt;p&gt;Paper covers rock. You win!&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="choices"&gt;
 &lt;div class="choice" id="s"&gt;&lt;img src="https://img.icons8.com/color/48/000000/hand-scissors.png" /&gt;&lt;/div&gt;
 &lt;div class="choice" id="p"&gt;&lt;img src="https://img.icons8.com/color/48/000000/hand.png" /&gt;&lt;/div&gt;
 &lt;div class="choice" id="r"&gt;&lt;img src="https://img.icons8.com/color/48/000000/hand-rock.png" /&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;p id="action-msg"&gt;Make your move!&lt;/p&gt;
 &lt;script src="app.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;<i>
 </i>`</CODE>
 CSS
 <CODE>`<i>
 </i>@import url('https://fonts.googleapis.com/css2?family=Asap:wght@500&amp;display=swap');
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: Asap, sans-serif;
 color: white;
 }
 
 body {
 background-color: #282730;
 }
 
 header {
 background-color: white;
 padding: 20px;
 }
 
 header&gt;h1 {
 color: black;
 text-align: center;
 }
 
 div&gt;p {
 text-align: center;
 }
 
 .score-board {
 border: 3px solid white;
 border-radius: 4px;
 text-align: center;
 width: 200px;
 margin: 20px auto;
 font-size: 40px;
 padding: 15px 20px;
 position: relative;
 }
 
 .badge {
 background: #E1574F;
 font-size: 14px;
 padding: 2px 10px;
 }
 
 #comp-label {
 position: absolute;
 top: 30px;
 left: -26px;
 }
 
 #user-label {
 position: absolute;
 top: 30px;
 right: -25px;
 }
 
 .result {
 font-size: 40px;
 font-weight: bold;
 }
 
 .choice {
 display: inline-block;
 border: 4px solid white;
 border-radius: 50%;
 padding: 10px;
 margin: 0 20px;
 transition: all 0.2s ease;
 }
 
 .choices {
 /* margin: 50px 0 20px 0; */
 margin-top: 50px;
 margin-bottom: 20px;
 text-align: center;
 }
 
 .choice:hover {
 cursor: pointer;
 background: black;
 }
 
 #action-msg {
 text-align: center;
 font-weight: bold;
 font-size: 20px;
 }
 
 .green-glow {
 border: 4px solid #4dcc7d;
 box-shadow: 0 0 10px #31b43a;
 }
 
 .red-glow {
 border: 4px solid #fc121b;
 box-shadow: 0 0 10px #d01115;
 }
 
 .grey-glow {
 border: 4px solid #464647;
 box-shadow: 0 0 10px #25292b;
 }
 
 .reset-button {
 text-align: center;
 border: solid;
 width: fit-content;
 margin: 0 auto;
 }
 
 div.reset-button&gt;button[type="reset"] {
 background: green;
 color: white;
 display: block;
 }<i>
 </i>``

@bwclovisMay 21.2020 — #Not sure of the whys, but its the font size. Looks like it SHOULD be 40px but is getting set to 14(ish)... somewhere. Adding font-size: whatever size to the reset-button class should do it.. THAT being said, whats the purpose of this div?

@shakozzzauthorMay 22.2020 — #@bwclovis#1618688 Thanks for the reply! So you're saying div.reset-button expects its content to have font 40px, but since its content for some reason actually has font size around 14px it makes up for that by adding blank vertical space?

Furthermore, do you say the font should be 40px because that's what's set for class _score-board_?

``<i>
 </i>.score-board {
 border: 3px solid white;
 border-radius: 4px;
 text-align: center;
 width: 200px;
 margin: 20px auto;
 font-size: 40px;
 padding: 15px 20px;
 position: relative;
 }<i>
 </i>`</CODE>
 Well, the only place where I set any font size to 14px is in the <EM>_badge_</EM> class, but I don't think that would affect the button, would it? 
 <CODE>`<i>
 </i>.badge {
 background: #E1574F;
 font-size: 14px;
 padding: 2px 10px;
 }<i>
 </i>``

Also, out of curiosity, how were you able to gauge the font size as 14(ish)?

Finally, I used div because I wanted to have the button on a separate line. But I guess I could just get rid of div and rely solely on _display: block_ to achieve that.

@bwclovisMay 22.2020 — #I probably would kill the wrapping div, not needed. To see the font size I used dev tools. At a QUICK glance it looks like an inheritance issue.

@anthony7nrMay 22.2020 — #shakozzz, thanks for explanation.

Also in #CSS _↴

Hiding certain data when printing image-less/javascript-less 3-D text CSS problems in Safari

Success!

Help @shakozzz spread the word by sharing this article on Twitter...

Tweet This

Why is vertical spacing eliminated when block elements are wrapped with div?

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Why is vertical spacing eliminated when block elements are wrapped with div?

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴