CP202 Lecture 4: CSS - CSS Margins, Padding, and Borders
Document Summary
Look on the site for the actual images. Becoming familiar with css can be difficult given the number of properties and options available. We will start by looking at how margins, padding, and borders are related to each other, and to the content they surround. (stylesheet of examples for this page: css_marg_pad_bor. css) First, a reminder of what the css box model looks like: Margin: a transparent area set between one element and the next. Padding: the spacing between the element content and its border. Width: the width of an element is defined by the width of its content, not of its margins, borders, or padding. We will create a number of examples to demonstrate the relationships between margins, padding, borders, and the content they surround. (all quotes for these examples come from winston churchill. ) We will start with two simple paragraphs which have their margins and padding set to: the css and html codes are:
