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.
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 The Margin From An Inline-Block Element Affect A Sibling Inline-Block Element
The inline-block
element behaves like an inline
element in that it will be subject to positioning attributes such as line-height
and vertical-align
. Once you increase the margin-top
of nav
past 500px
or so, the height of the line is larger than the height of the hgroup
. The default vertical-align
of baseline
pushes hgroup
down. In other words, the elements are positioned according to the inline flow.
Please note, in the snippet below, that when I set vertical-align
to top
than the hgroup
is placed at the top of the line.
heading { position: relative; display: inline-block; border: 1px solid #333;}
heading hgroup { display: inline-block; font-family: "Avenir"; font-size: 5em; border: 1px solid yellow; vertical-align: top;}
nav { position: relative; display: inline-block; margin: 550px 0 0 -1.618em; border: 1px solid red;}
<heading> <hgroup> <h1>NERD</h1> <h1>CO.</h1> </hgroup> <nav> <ul> <li><a href="#">articles</a></li> <li><a href="#">podcast</a></li> <li><a href="#">social</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav></heading>
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.
`margin:auto;` doesn't work on inline-block elements
It is no longer centered because it now flows on the page in the same way inline
elements do (very similarly to img
elements). You will have to text-align: center
the containing element to center the inline-block
div
.
#container { border: 1px solid black; display: inline-block; padding: 50px;}.MtopBig { margin: 75px auto; position: relative;}.center { text-align: center;}
<div class="center"> <div class="MtopBig" id="container"></div></div>
Related Topics
Html 5 Geo Location Prompt in Chrome
Css3 Transition Doesn't Work with Display Property
Why Are Iframes Considered Dangerous and a Security Risk
Using Base Tag on a Page That Contains Svg Marker Elements Fails to Render Marker
Where Is the HTML5 Document Type Definition
Hiding Elements in Responsive Layout
Maintain Image Aspect Ratio When Changing Height
Apply CSS Styles to an Element Depending on Its Child Elements
Html Table With Horizontal Scrolling (First Column Fixed)
Css3 Border-Radius Clipping Issues
What's the Difference Between HTML 'Hidden' and 'Aria-Hidden' Attributes
How to Center an Unordered List
Link with Target="_Blank" and Rel="Noopener Noreferrer" Still Vulnerable