HTML Object Sizing

When adjusting the sizing of iEBMS page elements as well as elements you add to the iEBMS structure, top, left, right and bottom files, it is important to keep the HTML box model in mind.  

All HTML block elements (such as div, table, p) have a size, padding, border and margin.  These values all work together to determine how much space an element uses on your page.  For a useful display of how these work together, see the attached image (html box-model.png), which is a representation of the HTML box model from the Google Chrome developer tools.

The outermost section of an element is the Margin.  Think of a margin like the margin of a page.  Where a page margin determines how much space is between the edge of the page and the text, an HTML margin determines how much space is between one element and those surrounding it. 

The Border is after the margin and will surround the element plus its padding.  If the border is set to 0, there will be no noticeable difference between the margin and the padding.  Think of the border like the frame around your element. It can be non-existent, very thin or very thick.

The padding surrounds the element within the border.  It determines how much space, if any, is between the border and your element.  If the padding is zero, your element will touch the border.

Finally in the center is the actual element.  To determine the amount of space your element will use on the page, you can add together the size of the margin, border, padding and element.  It is also important to note that margins will not overlap.  Two elements each with a three pixel margin will size at least six pixels apart.  

For more information on block elements see: https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

For more information on the Box Model see: http://learn.shayhowe.com/html-css/box-model