Vertical align middle is not working properly with two empty inline blocks aligned next to each other?

Question

body {
  border: 2px solid black;
  height: 100px;
}

div {
  vertical-align: middle;
  display: inline-block;
  width: 50px;
  height: 50px;
}

.a {
  border: 2px solid red;
  margin-top: 20px;
}

.b {
  border: 2px solid green;
}

<!DOCTYPE html>
<html>

<body>

  <div class="a">a</div>
  <div class="b">b</div>dsfdg

</body>


</html>

Why are both the blocks not aligned to the middle ? why is there a strange space between upper border of body and upper border of block b? Should not something like this happen without adding top margin to block b (in this case i added margin-top to the block b myself)?

body {
  border: 2px solid black;
  height: 100px;
}

div {
  vertical-align: middle;
  display: inline-block;
  width: 50px;
  height: 50px;
}

.a {
  border: 2px solid red;
  margin-top: 10px;
}

.b {
  margin-top: 10px;
  /*should not block b come automatically 10 px down without adding top margin to it */
  border: 2px solid green;
}

<!DOCTYPE html>
<html>

<body>

  <div class="a"></div>
  <div class="b"></div>dsfdg

</body>

</html>

@Unbywyd That is why i am asking--- should not block b come down 20px itself so that both the boxes can be vertically aligned to the middle?? — noob, Aug 23 '20 at 07:46
No, margin work only for active (the one that has the margin) element: https://jsfiddle.net/rmex5htL/ — Unbywyd, Aug 23 '20 at 07:54
@Unbywyd .. So do you mean that the blocks which are added uneven margins will not be vertically aligned properly..[link](https://jsfiddle.net/ro7y3z2s/) — noob, Aug 23 '20 at 08:32
I gave you a complete answer to your question, where did the space come from and what is happening, and a note, an inline block is not a block! — Unbywyd, Aug 23 '20 at 08:34
@Unbywyd.. I wrote above comment before you answered. I accepted your answer . By the way can you tell from which source do you study css or from which source you were able to answer my question ?? It would be great help because i keep getting baffled by such doubts .. — noob, Aug 23 '20 at 08:47

Unbywyd · Accepted Answer · 2020-08-23T08:45:19.770

0

I'll try to answer your question, possibly it helps to others. In this case, the margin refers to the element itself, and therefore the recalculation is relative to the size of your element, including the margin

examples:

edited Aug 23 '20 at 08:45

answered Aug 23 '20 at 08:19

Unbywyd

856
1
4
8

Margin is not safe and he already tried this...not useful at all. – SoliMoli Aug 23 '20 at 08:23
What is the meaning of your comment? The person asked why this is happening, I explained the algorithm – Unbywyd Aug 23 '20 at 08:24
Did you find the answer? – SoliMoli Aug 23 '20 at 08:26
@Unbywyd.. Thanks i got it now. by the way from which source do you study css . Or from which source you found out this answer ? – noob Aug 23 '20 at 08:44
I have a lot of experience in the client side especially html/css (when i started learning there were only books), see my edited answer I have added another example for you regarding your last link – Unbywyd Aug 23 '20 at 08:48

score 0 · Answer 2 · answered Aug 23 '20 at 08:20

OK you can't fix this with using only vertical-align: middle because they don't know where are they to find the middle of that section. to let them know where they are to find the middle you need display: table-cell; and display: table; structure. you can fix this also by using margin but it's not safe and i think you already know.

body {
  border: 2px solid black;
  height: 100px;
  display: table-cell;
vertical-align: middle;
}

div {
  vertical-align: middle;
  display: inline-block;
  width: 50px;
  height: 50px;
}

.a {
  border: 2px solid red;
  margin-top: 10px;
display: table-cell;
vertical-align: middle;
}

.b {
  margin-top: 10px;
  /*should not block b come automatically 10 px down without adding top margin to it */
  border: 2px solid green;
display: table-cell;
vertical-align: middle;
}

.c {
display: table-cell;
vertical-align: middle;

}

html {
display: table;
width: 100%;
}

<!DOCTYPE html>
<html>

<body>

  <div class="a"></div>
  <div class="b"></div>
  <div class="c">dsfdg</div>

</body>

</html>

Vertical align middle is not working properly with two empty inline blocks aligned next to each other?

2 Answers2