CSS

Box-model

• Every thing in the HTML/CSS follows box-modelling (including your root element, the canvas or webpage area of your browser).
• The inner-most layer is of content.
• Covered by padding (distance between border and content).
• Followed by Border.
• And lastly covered by margin (distance of current element from its neighbours).

Difference between content-box and border-box

Content-box (default)	Border-box
Defines the height and width of the content only.	Defines the combined height and width of content+padding+border.
The padding and border takes addtional space beyond that of content.	The padding and border makea the content adjust according to space required by them.

Block element vs Inline element

Block Elements	Inline Elements
Takes the full width available in its parent element.	Takes only the space required by content inside it.
Always start from a new line.	Starts from the same line it space is available, and start from new one if current line is exhausted.
Forces any element after it to start from another new line.	Dosen't force it neighbours.
Height/Width/Padding/Margin/etc... are applicable always.	Height/Width have no effect and Padding/Margin only works on horizontal axis (left and right).
Both of them are convertible to each other via css property (display:block or display:inline)

My Advice

Best of both (block and inline) is found when you use property like (display:inline-block)

• Dosen't force any neighbours to start from new line.
• Dosen't nessasarily start from new line.
• Allows full fleged effect of height/width/padding/margin.