How to give inline block negative margin top

I originally published this article on 4th September 2011. It has since been completely rewritten to have much more practical application and address the many techniques surrounding it.

The

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

4 technique is a really handy alternative to a float based layouts. It has a few decent advantages, as float based layouts suffer from needing to be cleared and if height varies it can have undesired effects. With

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

4 you don’t need to worry about the height or clearing of elements. However, there are still some things to watch out for, which I will cover in this post. There’s also a Sass inline-block grid for you to use in your projects (should you need one).

Why use inline-block over floats?

It’s easy to say floats were never intended for layout, but that doesn’t stop you from using them. The main benefit to using

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

4 over floats is your elements don’t require any kind of clearing and the layout doesn't break when you have multiple items of different height.

The

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

4 approach is quite dependable in that sense. The only issue is with the elements still technically being inline, any spaces in your code will appear to break the layout. I will cover solutions to fix that. It’s a method I have come to rely on to get ‘divs side by side’.

General usage

Usage is just a matter of changing the display property of the element. A width will be necessary to size your elements appropriately.

.inline-block-element {
  display: inline-block; }

Vertical alignment

The flexibility of this method comes in with

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

8. With this, we can change the how the layout is displayed when items aren’t the same height. A different alignment may be favourable. The are many values, for

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

8. The ones that tend to favour grid layout are

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

0,

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

1 or

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

2. More information can be found on MDN.

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

Adding width

If your element has enough content to span 100% width, then it will. So if you have two elements that have a bunch of content in and you want them in two columns, you can add a width.

However, unless your code is minified, the elements will be 50% width, but not side by side. I’ll explain how to fix that shortly.

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

Using

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

4 to align to the left, right or centre

Another benefit to using this method is alignment tends to come without the issues of floating. You can easily align an element elements to the right or centre by using the relevant

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

4 value. However, this has to be applied to the parent, so our markup and CSS would look like the following:

  

    Some content here
  

.parent {
  text-align: right; }
.inline-block-element {
  display: inline-block;
  vertical-align: top;
  text-align: left; /* optional */
  width: 50%; }

The important thing to note about the CSS is you’ll find text also aligns to the right. So you may need to add

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

5 to counter this. I’d recommend setting up reusable class names for each text alignment, so you can apply them as and when.

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

How to deal with spaces

Elements which are

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

4 recognise spaces around them, this causes layout to break. In rare cases you may intend to have these spaces, but in this context, your indentation is purely for code formatting.

In turn, there are a few ways to deal with white space with

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

7. All of them encounter possible user error with implementation and it's determining which is best of a bad bunch.

Comments/minifying HTML

If you have the availability of minified HTML always, great you don’t need to worry about this. Although if there is the chance that unmagnified HTML can be introduced at any point you’ll need a solution.

The issue with removing space is it can make our HTML unreadable. So this is where comments can come in. However, it doesn’t really make it that much better.

Overall, this approach isn’t very friendly. It relies on you knowing this is the approach when being involved in a project.

Negative margin

I would strongly recommend against this method. For completeness and as a last resort I mention it. The negative margin method involves adding a right margin that offsets the element the equivalent amount of a single space. This generally works out at

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

8 for all browsers except IE. Which worked out at

.inline-block-element {
  display: inline-block;
  vertical-align: top;
  width: 50%; }

9. I've not tested this recently as it's not my go to method, but my past experiences proved this to be the case.

The fact there is a difference in space width, between browsers, is the major reason to not use this approach. Everything has to be 1px off to accommodate IE. It also means you have to be more vigilant in spotting spacing errors because of it.

.inline-block-element {
  margin-right: -4px; }

  

    Some content here
  

0 on the parent

This method involves setting the parent element to have no font size, which means any spaces, no longer exist. This is my preferred method due to it relying less on human error and browser annoyances.

The best thing about it is someone inheriting your code can just reference grids that have already been used and be good to go. Someone inheriting code that uses the comment or whitespace removed approach has to be aware of this. The same applies to the negative margin approach they need to be aware it could have impact visually.

Grid layout with Sass

Taking what has been explained in this post. I use Sass to generate my grid. I find it to be a reliable grid for me, with breakpoint adjustments. I have made everything have the ability to be changed without messing with the grid generation.

Sass

You can view the compiled version if you would like to just have the CSS.

See the Pen Sass inline-block grid by Steve (@stevemckinney) on CodePen.

Grid details

• 12 column
• 4 responsive breakpoints (0px, 540px, 640px, and 840px)
• 12px gutter

Usage: HTML

To start a grid it requires a containing element. With the class

  

    Some content here
  

1. If you wish to add spacing between elements add

  

    Some content here
  

2.

To create a layout, add an additional

  

    Some content here
  

3 inside that with the relevant class name. For example, a two column layout at the first breakpoint and 4 column at the medium breakpoint (640px and up).

  

    Content
  
  

    Content
  
  

    Content
  
  

    Content
  

Usage: Sass

The grid can be included with the defaults in your Sass by including the grid mixin.

Overriding through the mixin

The grid mixin takes 3 parameters.

  

    Some content here
  

4 which can be any number in reality.

  

    Some content here
  

5 a pixel value is recommended.

  

    Some content here
  

6 which is a map for your breakpoints.

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

0

Modifying breakpoints

I have set up a bunch of defaults to make it easy to override. So you don’t need to call the mixin with parameters. The first step will be changing or adding breakpoints. This can be done by changing the

  

    Some content here
  

7 variable.

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

1

Remove

  

    Some content here
  

8 from the variable and set it again with your other variables. You can also change the naming convention to more your liking too. It will generate grid classes based on the name. eg:

  

    Some content here
  

9,

.parent {
  text-align: right; }
.inline-block-element {
  display: inline-block;
  vertical-align: top;
  text-align: left; /* optional */
  width: 50%; }

0.

Other variables to modify

You can modify the column amount and the gutter, with the following variables. The gutter number is half the value you want it to be overall.

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

2

Example with modifications

Here is an example of a 6 column grid, with 24px gutter and 4 breakpoints named alphabetically.

.inline-block-element {
  display: inline-block;
  vertical-align: top; }

3

A dependable layout technique

So you know now how to handle the main ways to handle the issues with this technique for layout. Once you’re really familiar, you will find reliance on it for layout. Especially if you were using floats beforehand.

How do you set a negative margin?

If we want to apply only a negative margin to a single side, then CSS provides predefined properties. margin-left: -10px: apply margin -10px to left side. margin -right: -10px: apply margin -10px to right side.

Can you add margin to inline block?

You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element. Inline elements can actually appear within block elements, as shown below. I've added white padding on the left and right side of each inline element.

Can I have negative margin?

Gross profit margin can turn negative when the costs of production exceed total sales. A negative margin can be an indication of a company's inability to control costs.

Is it possible to use margin top or margin bottom on inline elements?

Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content.