The difference between inline and inline-block
Photo By Nick Karvounis on Unsplash
Hello guys, welcome back to our CSS lesson. This time, the topic is the basic difference between the display: inline-block property and display: inline. Let’s dive in, and check out the explanation below :
- Inline elements do not have width and height property settings. They will always automatically adjust to the content inside them. Therefore, even if we set the width and height on this element, it will have no effect, while inline-block can be set freely.
- Inline elements do not have settings for margin and padding properties (only top and bottom), so if we apply margin-top or margin-bottom to this element, it will have no effect at all. On the other hand, inline-block can.
- Both inline and inline-block do not create a new line and make the element sit next to the previous one.
To understand the difference between inline and inline-block in more detail, let’s look at the example below.
Please change the display property in both of the above CSS examples to inline and inline-block, then draw your own conclusion. If you have any questions, feel free to write them in the comment section.
That’s the explanation of The difference between inline and inline-block that Mangcoding can share. Hopefully, this article is useful and provides new insights for you. If you have constructive feedback or suggestions, feel free to leave a comment or contact us via email and Mangcoding’s social media.