Getting Started

Contact Us or call 1-877-932-8228
Getting Started

Getting Started

The following diagram shows how margins, borders, and padding affect the width and height of an element:Margins, Borders, and Padding Diagram

As the diagram shows, margins, borders, and padding increase the amount of space that an element takes up. For example, the width of the div above is set to 160 pixels. On all four sides, the div has 15 pixels of padding, a 10-pixel border, and a 20-pixel margin. The entire width of the element inclusive of its padding, border, and margin is 250 pixels (160px + (2 * (15px + 10px + 20px))). This becomes important when using positioning to layout pages.

The code for the page shown above follows:

Code Sample:

<meta charset="UTF-8">
<div style="margin: 20px;
			border: 10px solid black;
			padding: 15px;
			background: red;
			text-align: center;
			color: white;
			width: 160px;">
				<img src="Images/block.gif" alt="block">
<img src="Images/pixel.gif" alt="pixel" style="margin-left: 45px; width: 160px; height: 4px;">