Geek Answers Handbook

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

In the code below, I am trying to get the h1 element for the top field. When I set the inline position to css, margin-top does not appear. But when I change it to a built-in unit, it does it. I am wondering if anyone can explain why this is so. Thanks.

EDIT: here is the code in jsfiddle: http://jsfiddle.net/pjPdE/

Here is my HTML:

<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css"> <title> Max Pleaner First Website </title> </head> <body> <h1>Welcome to my site.</h1> </body> </html>

And here is the CSS

 body { background-image:url('sharks.jpg'); } h1 { background-color:#1C0245; display:inline; padding: 6.5px 7.6px; margin-left:100px; margin-top:25px; }
+8
html css
source share
3 answers

Section 9.2.4 of the CSS2 specification states:

integrated unit
This value causes the element to generate an inline block container. The inner part of the embedded block is formatted as a block block, and the element itself is formatted as an atomic built-in block.

in-line
This value causes the element to generate one or more inline fields.

Further, in the CSS2 specification ( section 9.4.2 ), we are informed that inline elements only consider horizontal fields ( proof ):

In the context of formatting formatting, fields are laid out horizontally, one after another, starting from the top of the containing block. Horizontal fields, borders, and padding are respected between these fields.

The difference between inline and inline-block is that inline elements are treated as inline, while inline-block elements are effectively treated as blocks (which are visually embedded in each other).

The block level elements apply to both horizontal and vertical fields, while the linear level elements take into account only horizontal fields.

+14
source share

The <h1> by default a block element that allows fields. Using display: inline turns it into an inline element, such as a span tag, which does not allow margins.

Using display: inline-block allows you to use both functions of both elements.

Displays an element as a block container at the row level. The inner part of this block is formatted as a block level, and the element itself is formatted as a built-in box

Link: w3schools

+5
source share

Only block level elements can have fields. its display: inline; makes it (not surprisingly) become an inline element, thereby losing it.

Try using the inline block if you want to keep it inline with other content and take advantage of the fields.,.

+1
source share

More articles:


All Articles