Extra space in the bottom of a parent block element

Question

I have a parent element which is a block and so is the child element. The child has fixed dimensions where as the parent has none. yet there is an extra space at the bottom of the parent div. Can someone tell me where the extra space from? thanks in advance.

PUG

article.parent
  div.text-align

SASS

.parent
    border: 10px solid black
    text-align: center

.text-align
    display: inline-block

Code-Pen

Check Output here

Before you say it's not a duplicate because it's not an image - it's the same for all inline / inline block elements — Pete, Mar 14 '19 at 10:23

score 0 · Answer 1 · answered Mar 14 '19 at 10:12

0

Please add vertical-align: top;. please check below example code.

.parent
    border: 10px solid black
    text-align: center

.text-align
    display: inline-block
    vertical-align: top

answered Mar 14 '19 at 10:12

user10936942

171
1
2

Thanks that works. Can you also explain why there is extra space to begin with? – Ganesh Kaniarasu Mar 14 '19 at 10:16

Extra space in the bottom of a parent block element

1 Answers1