And these CSS rules: *...">
All geek questions in one place

CSS String Block Differences

I have an HTML code:

<section class="container"> <div class="search"></div> </section>

And these CSS rules:

 *, *:before, *:after { box-sizing: border-box; } body, section, div { margin: 0; padding: 0; } html, body { height: 100%; } .container { display: inline-block; position: relative; } .search { display: inline-block; padding: 3em; border: 1px solid black; }

If you check the section element, you will see that it has a size of 5 pixels ... I have not set the size. I leave that the browser automatically calculates it with the size of the child.

Why is this behavior?

+4
source share
2 answers

The reason is because you are using inline-block for the container and search elements. The idea is that inline-block treats elements as text in a paragraph; i.e. inline . Thus, while the elements themselves are block elements, the browser adds some space between the elements due to the space that you have in your HTML. Just as adding spaces in the p tag puts spaces between words, adding spaces between two inline-block elements puts spaces between elements.

As the saying goes, there are several ways to fix this:

  • Minimize HTML. Perhaps the easiest way. Instead of having a space in the code, just wrap everything in one line, for example: <section class="container"><div class="search"></div></section> . (Warning: this has not been verified.)
  • Add negative fields . This is a bit of a hack, but you can find out how much space is being added using the capabilities of the check item of your browser than to make this negative margin. That is, if there is 4px of space between your two elements, apply the following: margin:-4px; . (By default, the browser will apply 4 pixels of space between inline-block elements.) If you use em or percentage, this can work with responsive projects.
  • Use something else. If you try vertical-align , then inline-block does not always work. Here's a good resource for this: http://phrogz.net/css/vertical-align/ .
+4
source

Source: https://habr.com/ru/post/1488610/

More articles:


All Articles