box-modeleasy
What is the difference between display block, inline and inline-block?
Answer
block takes the full available width, starts on a new line, and honours width and vertical margins. inline flows within text, ignores width/height, and only applies horizontal margins and padding for layout purposes. inline-block flows inline like text but accepts width, height and vertical spacing — which is why it was the old go-to for laying items in a row before flexbox.
Points an interviewer listens for
- block: full width, new line, sizing honoured
- inline: flows in text, ignores width/height
- inline-block: flows inline but is sizeable
- display: none removes it from layout entirely
Reported at
Similar questions have been reported by candidates at Ant Group, Digiryte, Ignxt Technologies, Mahe Technologies, muVerity, Neerx Technovation.
Now try answering it out loud
Interview practice mode times your spoken answer and checks it against the points above.
Practise this question