Set Up Width With Padding

Padding or the inner gap is also part of the portion. Each time you define the padding, it means that the element has the

space between itself and the inner gap.





If you do not define the padding, the element will be starting from the inner edge.






If you define the padding, the element will not be starting from the inner edge but there's a space between the element and

the inner gap. You can set up the padding for Left, Top, Right & Bottom.






The width of the "Page Layout" (default width of the entire editable area) is 900px without padding, the total width of the

"Page Layout" is definitely 900px.





If you define the padding (ie. left 20px & right 20px), then the total width of the "Page Layout" is 940px.





The padding of "Header", "Content Area" & "Footer" portions function the same. If you set the width "Auto", it means the

width of the selected portion will be the exact size with the default width of the "Page Layout" without padding (even though

the "Page Layout" itself has padding).








If you use the padding with "Auto" width, it means that the width definitely includes the padding but will yet be

automatically the same size with the width of the "Page Layout". For example, if the default width is 900px, the left padding

is 50px and the right padding is 50px. The system will automatically deduct the width of the portion in order to make it fit

900px (which is the default width).







If you input the exact width (ie. 700px) with the exact padding (ie. left 30px & right 30px), the total width of the portion will

include the padding as well (760px).






The padding of the "Menu Bar" functions the same. It refers to the entire area of the menu bar, not each individual menu.

To set up the padding of the "Top Menu Level" & the "Sub Menu Level".