Before reading check notes on display property. Inline element inside block Default Note that block element takes all possible width Block element fits the children content Margin & padding All margins work for block element Only side margins work for inline element All paddings work for all elements Height & width Height & width can be applied to block element Height & width do not have any effect on inline element Horizontal position of inline element Set text-align property of parent block element Vertical position of inline elements relative to its normal position Vertical position with align-content Vertical centering of inline element with line-height Make height & line-height properties of parent block element the same. Child should be one line only. Horizontal position of block element Apply left & right margins To center the block use margin: 0 auto It will be visible only if block el has a fixed width Position of any element within relative parent with known height Parent's height should be set to have any effect on vertical positioning. Position display: table-cell within display: table table-cell is stretched within table Position with flex Position with grid Horizontal position with float Default word <div> {Array(40).fill('').map(el => 'word ')} <img src='/imgs/va/img20.jpg' height='150' style={{ float: 'right' }}/> word <img src='/imgs/va/img21.jpg' height='150' style={{ float: 'left' }}/> {Array(30).fill('').map(el => 'word ')} <div style={{ border: '1px solid red' }}>new line</div> </div> With float word new line <div> {Array(40).fill('').map(el => 'word ')} <img src='/imgs/va/img20.jpg' height='150' style={{ float: 'right' }}/> word <img src='/imgs/va/img21.jpg' height='150' style={{ float: 'left' }}/> {Array(30).fill('').map(el => 'word ')} <div style={{ border: '1px solid red' }}>new line</div> </div> With float & clear: both word new line with clear: both <div> {Array(40).fill('').map(el => 'word ')} <img src='/imgs/va/img20.jpg' height='150' style={{ float: 'right' }}/> word <img src='/imgs/va/img21.jpg' height='150' style={{ float: 'left' }}/> {Array(30).fill('').map(el => 'word ')} <div style={{ border: '1px solid red', clear: 'both' }}>new line with <Code>clear: both</Code></div> </div>