Back to the basics pt3
Let’s talk a little about div structure and how css rules formulate it. So we left with a <div id=”title”>My name is Bob</div>. Now we have a reference to a css instance called #title. The width and height are a numeric value and a unit. The options for units are
- em (ems, the height of the element’s font)
- ex (x-height, the height of the letter “x”)
- px (pixels, relative to the canvas resolution)
- pt (points; 1pt=1/72in)
- pc (picas; 1pc=12pt)
- -+%(percentage usually relative to the item its nested in)
So the width and height are stated. Now we can explore the margin and padding statements. Margin deals with the margins around the div. If you want empty space between two divs, the margin option is the one to use. This can be stated in any of the afore mentioned units. The margin statement has no effect to the div other than moving its placement relative to others. The padding statement is a little different. Padding deals with the area inside the div. Think of it as padding in a box that keeps things from touching the sides. Now when you declare a padding statement, it physically changes the size of the div. A 480 pixel wide div is 480 pixels wide, until you add a padding to each side of, let’s say 10px. You essentially have added 20px total to the width, which ends up being actually 500px wide. To compensate for padding you have to change the div size statement, if you want to keep the original constraints. Both margin and padding can be applied to all sides at the same time or side specific. Let’s look at that now.
To add a margin to all sides equal, you simply state margin: 10px;. This will add a margin of 10px to every side. You can also state a clockwise starting with top. So that would look like, margin: 10px 30px 10px 15px; which is 10px at top, 30px on the right, 10px on the bottom, and 15px on the left. You can shorthand this to only 2 if the left – right as well as top – bottom measurements are the same. Like margin: 20px 50px; that will give you 20px top, 50px right, 20px bottom, and 50px left.
You can also use them independently like this.
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Hope this does not leave you in the dust, more to come late.
