I have a question about <div>tag layout.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

  </head>
  <body>
    <div class="first" style="height:50px; background-color: deepskyblue;">
      <div class="first1" style="display:inline-block; color:white;font-size: 30px;font-family:serif;text-align: center; width:100px; line-height: 50px; height:50px; background-color:deepskyblue;">
       op.gg
      </div>
      <div class="first2" style="display:inline-block;  background-color: #333399; height:50px;">
    </div>

  </body>
</html>

Why does the "first 1" class come a little below the "first" class? Height I set it to 50px to pay back, so I want the two divisions to overlap exactly, what should I do?

layout_height

2022-09-21 23:15

1 Answers

inline-block This... The moves are weird.

The reason is that the first2 element does not contain the contents, so the elements with the inline-block property seem to be broken together.

inline-block means that the layout is set when you have content inside the element or specify the width/height directly.

Regardless of whether the width/height value is specified, the layout seems to be completely different depending on whether there is internal content or not.

If you also put text in the first2 box, it will be captured properly.

Elements without content can be eliminated with display: none or

We don't know when the above side effects will occur again, so it would be better to avoid using inline-block.

float: left wouldn't be bad either,

It's a one-dimensional alignment, so it's good to use flex layout.

2022-09-21 23:15

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656