⇒in html every element is in the one rectangle box. and how rectangle box behave its depend on the display property

four property of display

1. inline(default)

2. block

3. inline-block

4.none

let learn by example

1)block:

take space or width fullest
Example: div || p || h1 to h6 || form
start from new line
you can apply height and width
margin don’t apply in block element, padding applies but don't visually shows in

2)inline:

take space or width which needed
example: img || a || span || button
not start from new line
you can not apply height and width
padding don’t work in block element its shows visually but actual height not change

3)inline-block:

take space or width which needed
not start from new line
you can apply height and width

4) none:

its hide the display in whichever element apply display: none
its just feel like there is no html written there

Note to take

you can hide through visibility: hidden; but for that they affect other element they just hide that part of height width all other property apply on that thing