What's the difference between display: inline; and display: inline-block;?

[aubsrey]

Question

What’s the difference between display: inline; and display: inline-block;?

Answer

display: inline; elements:

• allow display: inline; and display: inline-block; elements to sit to their left and right
• do not respect top/bottom margin/padding declarations, and do not respect width and height declarations
• only take up the width of the content

display: inline-block; elements:

• allow display: inline; and display: inline-block; elements to sit to their left and right
• respect top/bottom margin/padding declarations, and they respect height and width declarations
• takes up all available horizontal space unless otherwise specified

[seanpausm]

how come when I assign postion: absolute to the left element and position relative to the right element this also worked the same?

[weiliu4704314815]

Just noticed that adding float: left to the left element does the same thing. Not sure about their difference though.

[beta0695418781]

I don’t understand, I thought I did it correctly.

[unicorn]

Delete inline-block for #right

[webrunner26364]

So does anyone knows why do i get the same result just by adding “float: left;” to the #left element?

Regards!

[ruronite]

@webrunner26364 @beta0695418781 when you use the float property on a CSS selector it is treated as an “inline-block” and thus there is no need to add display: inline-block to the #right element

[webrunner26364]

Thanks man!

I really appreciate it!

[ruronite]

@webrunner26364 you’re welcome

[guilhfer]

In this link of the w3 schools I had better undestanding:

Tryit Editor v3.6

In the exemple you can see that the diference between the 3 are:

Inline: doent support width and height, but alow your element to sit side-by-side of the next element.
Block: support width and height values, but ad a
to the next element.
Inline-block: support width and height but keep-it side-by-side, without breaking the line.

[lucian_zavoianu]

Hi everyone,

So I think that I managed to stumble upon a bug on the page.

Either I write the correct code or accept the codecademy solution, I can’t advance further due to the error in the screenshot.

Did anyone come across this issue so far?

I raised a bug request as well, but I don’t know how fast this will be attended to.

Any input will be welcome.

Cheers!

[lucian_zavoianu]

Update: Started working right after I posted the message, but I don’t know what fixed it.

[mimida]

I think maybe the example of the boxes is not good to explain the display syntax, it may be clearer to try some boxes within a paragraph of words.

[net7464548007]

Please from my code, why are the boxes not next to each other?

[s.i.n.a.r.t]

I think it’s because you have a display setting for both Box-Left and Box-Right.
You only need the display setting for the Box-Left and have the Box-Right floating.

So if you remove the display setting on Box-Right and replace it with “float:right”, it should work

[net7464548007]

Sorry for the late response. My thought process is along the line that “display: inline-block;” should appear next to each other in the parent container provided the width can accommodate both child or is there something I missed?

I can complete the exercise, but I need some clarification on the above.

[cyberzen21]

Why it keeps asking “Did you shift the blue box left or right?” I already put display: inline-block on #left.

[ajax5640144862]

I would like to ask why did the element move upwards during float left? The element has a width of 90px.

[andihafner]

Another quite concise description:

(Sharing of the image is expressly permitted)

Link to the full article

[noahmanns8181112886]

So I see a couple people saying they got the same thing as me - I just copied what was in front of me and did Float:Left and achieved the same visual affect, is this going to operate differently or are float and inline-block interchangeable?