CSS Display: Inline-Block Does Not Accept Margin-Top

Margin-top doesn't work when display is set to inline

you just have to make align-items:center it will make the things center.

*{

    padding: 0;

    margin:0;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.logo .text-primary {

    color: #85b84b;

}

a:hover{

    background: #85b84b;

    border-radius: 5px;

}

nav{

    background: #444;

    color: #f4f4f4;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem;

}

nav li{

    list-style: none;

    display: inline;

    padding: 1rem;

}

nav a{

    text-decoration: none;

    color: #f4f4f4;

    padding: 1rem;

}

<nav>

  <h1 class="logo">

     <span class="text-primary">

     <i class="fas fa-book-open"></i> Edge</span>Ledger

  </h1>

  <ul>

     <li><a href="#">Home</a></li>

     <li><a href="#">What</a></li>

     <li><a href="#">Who</a></li>

     <li><a href="#">Contact</a></li>                

  </ul>

</nav>

inline element does not accept margin-top

Inline elements and margins is a hot topic because of its unusual activity. Some people use padding to overcome this problem.

.....

Another way is to use display:table; instead of display:inline;

best way is to....

use css styling like this

div{
position:relative;
top:-2px;
}

this brings the div 2 pixels down.

CSS display: inline-block does not accept margin-top?

I used display: table. It has the content-fitting properties of inline-block but also supports negative margins in a way that will shift the content following it up along with it. Probably not how you should be using it, but it works.

.label {
  background: #ffffff;
  display: table;
  margin-top: -2px;
  padding: 7px 7px 5px;
}

Why does margin-top work with inline-block but not with inline?

Section 9.2.4 of the CSS2 specification states:

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

inline
This value causes an element to generate one or more inline boxes.

Further on in the CSS2 specification (section 9.4.2) we get told that inline elements only respect horizontal margins (proof):

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

The difference between inline and inline-block is that inline elements are treated as inline whereas inline-block elements are effectively treated as blocks (which are visually inline with each other).

Block-level elements respect both horizontal and vertical margins whereas inline-level elements only respect horizontal margins.

margin-top not working properly inside inline-block form

Get rid of the margin for .textBox and try this:

form{display:block;}    
form input{
    display: inline-block; vertical-align:middle;
}

WARNING: this will align ALL your input elements, so you may need to add more declarations if you have more elements and you need it so. If it's just these 2 elements, then you'll be OK

CSS display block property margin issue

It's called collapsing margins, and that doesn't happen on inline blocks.

8.3.1 Collapsing margins

Margins of inline-block boxes do not collapse (not even with their in-flow children).

Follow this post for more ways to avoid that.

---

Related Topics