Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline , display: inline-block and display: block :
One common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:
.nav li display: inline-block; font-size: 20px; padding: 20px; >
Grid of Boxes
It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property.
However, the inline-block value of the display property can make this easier (but it is not flawless — see more examples below).
Examples
Floating boxes — using float (notice that we also need to specify a clear property for the element after the floating boxes):
How to Make Inline-Block Elements Add Up to 100% Width
When it comes to creating layouts with HTML and CSS, things don’t always add up. If you’ve ever tried to create two inline-block divs with a 50% width, then you know what I mean. The divs simply do not line up the way you would expect them too.
In this post, we’ll cover why this happens and how you can make your inline-block elements add up to 100% width to create perfect alignment.
If you are slightly obsessive-compulsive about making things add up (like me), then these tips just might save you from pulling your hair out.
The Scenario
You have two divs that are displayed inline-block. You set the width of each div to exactly 50%, but the second div falls below the first when you try it.
In the CSS above you can see that we have set the width for divs to 50% and the display to inline-block. You might think this would result in two perfectly equal boxes, inline with each other, but it doesn’t turn out the way you would expect.
You can achieve your desired result by changing the div width to 49%, but that’s not good enough. It NEEDS to be 50%!
The Reason This Happens
The divs do not display inline with each other at 50% width because inline elements respect the word spacing between your divs in the html. That sounds silly, but that is essentially what is going on.
The space between your first
and second
create an actual gap that you can see on the page. This gap carries its own static width that must be accounted for when adding up to 100%.
With this in mind, you can essentially achieve the desired result by removing the space between your inline divs in the html.
This is great, but not ideal if you end up adding more stuff inside your div tags. This solution also makes it difficult to read your code, so what other options do we have?
Fortunately, there are quite a few.
Minify Your Resources
If you’ve ever viewed the source for a web page and seen something that looks like this:
Then you have come across a website with minified resources.
Minification removes white-space that is unnecessary for browsers to interpret, which is great for reducing your overall file size. However, it also takes care of our issue in the example above.
If you’re working on a smaller scale website, then you can paste your HTML into a tool, such as HTML Minifier when you’re ready to deploy it. And when you’re ready to make changes, you can paste your HTML into a tool, such as Unminify to make it readable again.
You can do this with CSS and Javascript too!
Accounting for Extra Pixels
Still not working? When you begin styling your divs, it’s easy to create extra pixels that will throw off your 100% width calculation. Make sure to check for the following:
Border and Padding
If you have a border or padding set for your divs, then you’ve created additional pixels that will prevent your divs from adding up to a 100% width.
To fix this, make sure you’ve added box-sizing: border-box to the div’s styles.
Applying box-sizing: border-box to your divs will ensure that the border and padding are included in the overall height and width of the element.
Margin
If you include margin around the div, then you will have to account for that spacing too.
Let’s say we want to add margin between the two divs. We can still accomplish it like this.
By adding a right margin of 1em, our two 50% divs will no longer add up to 100%. However, the CSS calc function allows us to subtract that additional space from each div (.5em x 2 = 1em).
CSS Solutions with Inline-Block
If you don’t want to minify your HTML, you can also use CSS to set both divs to a 50% width.
The White-Space: No-Wrap Solution
Adding white-space: no-wrap to the parent container (section) will allow you to display each div inline-block as expected without chaining your divs together.
If you have more text inside your divs, then you’ll end up with something like this:
You can remedy this by resetting the white-space back to normal on the child elements (div).
The problem with this solution is that it does not remove the white-space between the divs. It just ignores it.
If your parent container and divs share the same background color, this solution might work out just fine because you’ll probably never notice the gap. However, if you have any contrast between the divs and the background (like the example above), it’s easier to see that you don’t have perfect alignment.
Let’s introduce a new, full width div below our inline-block divs to illustrate:
Width: 50%
Width: 50%
Width: 100%
The gap between the two divs result in an overall width of 100% plus 4px. This can be remedied by using the CSS calc function to subtract 2px from each div.
While this does give you perfect alignment, it doesn’t get rid of the gap in between the two divs.
Fortunately, there is an alternative CSS solution for that too.
The Font-Size: 0 Solution
As mentioned previously, the gap between the two divs is due to word spacing. This means that it’s affected by the font-size property in CSS. Adding font-size: 0 to the parent container will remove the gap between the two divs.
This solution allows you to set the width of your inline-block divs to exactly 50% without compensating for extra pixels. However, the font-size property will be inherited by your divs, so you will need to reset the font-size to see your text.
If you want both divs to be exactly 50% width, then the font-size: 0 solution works great.
But what if you need 3 divs to add up to 100% width?
It doesn’t seem ideal to set the width to 33.3333%. Those trailing 3s repeat forever, so it will never truly add up to exactly 100%, right?.
Yes, that is possible too. That’s what makes the CSS calc function so great. You can create divs that are exactly 1/3 of your overall 100% width.
Let’s add a new “pink” div to illustrate.
Width: 1/3
Width: 1/3
Width: 1/3
Width: 100%
The CSS calc function allows us to create a perfectly aligned 3-column layout when using the font-size: 0 solution.
If you need to support browsers below IE11, then any of the solutions above might work out well for you.
However, if browser support is not a concern, there is always flexbox.
Using Flexbox Instead of Inline-Block
Flexbox was introduced to help us avoid these hacky layout situations. The only real down side is that it’s not supported in IE10 or below and only partially supported in IE11. If that isn’t a problem in your case, then you can achieve the same results as above with flexbox.
To do this, you simply need to add display: flex to the parent container and flex-grow: 1 to the divs (as opposed to defining a width).
Column 1
Column 2
Column 3
With the flexbox styles applied, we can have three inline divs of equal width – just as we can with the inline-block solutions.
Conclusion
One of the great things about CSS is that there is usually more than one way to solve a problem. Hopefully some of the suggestions above will help you with your future inline element spacing issues.
If you enjoyed this post, consider signing up for UXE weekly. I’ll send you the latest UX Engineer article every Monday!
Свойство width отвечает за ширину элемента. С его помощью мы можем увеличивать или уменьшать ширину строчно-блочных ( inline — block ) и блочных ( block ) элементов. На строчные элементы это свойство не будет иметь никакого влияния.
Строчно-блочные ( inline — block ) элементы по умолчанию подстраиваются под ширину контента, лежащего у них внутри.
Блочные ( block ) элементы по умолчанию имеют ширину 100%. Если представить сайт как документ с текстом, то блочный элемент займёт всю строку, на которой стоит.
Кроме фиксированной ширины можно задавать элементу минимальную ширину min — width или максимальную ширину max — width .
В современном CSS есть логический аналог этого свойства — inline — size .
