title: CSS Margin calculation
body: <p>While i do understand the overall CSS box model in theory like padding, border, margin, my understanding is restricted to this individual parts.</p>
  
  <p>I often gets confused how this is actually rendered by the browser. E.g. Like padding is within the border, but how is margin calculated?
  Is it wrt the box border or with respect to the screen?
  If we give both left and right margins, what takes higher precedence?
  If there is a width as well as left/right margins, how does the actual rendering take place like is the width of box made first,then the padding or what is it like?</p>
  
  <p>What difference does a float attribute added to this box with margin make?</p>