0

I just can't realize why first child has white space right after parent's "border". What is my mistake?

.content {
    font-size: 22px;
}

.content__row {
    height: 150px;
}

.content__column_half {
    width: 49%;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px dotted #000000;
    background-color: graytext;
}

https://jsfiddle.net/x8ant22n/

user2112300
  • 234
  • 3
  • 9
  • It's unclear what you mean...what border and what whitespace? Do you mean the vertical alignment - https://jsfiddle.net/x8ant22n/ – Paulie_D Apr 26 '16 at 14:26
  • ...or the space between the inline-block items - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Paulie_D Apr 26 '16 at 14:27
  • I meant the vertical aligment – user2112300 Apr 26 '16 at 14:40
  • 1
    Then it's just `vertical-align:top` - http://stackoverflow.com/questions/9670469/css-vertical-alignment-of-inline-inline-block-elements – Paulie_D Apr 26 '16 at 14:41
  • 1
    .auth_button padding-top:5px gives that vertical indent of the first div. remove that. profit. – GL.awog Apr 26 '16 at 14:43
  • wow, but why ".auth_button padding-top:5px" affects on first "content__column_half"? Is it unclear only to me? – user2112300 Apr 26 '16 at 14:46
  • 1
    u have 2 blocks with inline-block display side by side without specifing vertical-align. by default it's value is baseline. in this case the text signs in the both divs are on the same horizontal line. the more top padding you give in .auth-button the more two of the lines shift down together on the same line. it's the texts inside that are aligned, not containers – GL.awog Apr 26 '16 at 15:03

1 Answers1

1

Add this to .content__column_half:

display: block;
float: left;
margin: 0 .5%;

And remove: display: inline-block.

Fiddle: https://jsfiddle.net/x8ant22n/2/

Flex Alternative:

Add display: flex to .content__row and add flex-grow: 1 to .content__column_half`.

Remove display: inline-block

Fiddle: https://jsfiddle.net/x8ant22n/3/

theblindprophet
  • 7,260
  • 5
  • 29
  • 49