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 centering of inline element 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>