Content, Padding and Margins
Content
- K03a- (1:05)
- At the center of the box is the content.
- Content properties:
- width
- height
- min-width & max-width
- min-height & max-height
Padding and Margins
- K03b- (2:07)
- Padding and margins do similar things.
- They both create a cushion around the content.
- The main differences:
- Padding is adjacent to the content.
- Padding will show the background of the content (the color and/or image). The margin will not.
- The margin creates a transparent gap between other content and the box's border, padding, and content.
- Padding and margins have just one primary property – the size of the gap:
- Padding:
- Is between the content and border (or margin if there is no border).
- Margin:
- Is between the border (or padding if there is no border) and surrounding page content.
- Padding:
- Margin also has the auto value which is used for centering.
- Note that most block level elements have default margins that place a gap top and bottom.
- One notable exception is the <div> element which has margins of zero by default.
- The top and bottom margins are impacted by margin collapse.
Comparison between content, padding, and margins
- K03c - (4:22)
- The areas below are discrete div tags, each with different margin and padding settings.
- The settings are in the code, but also stated at the beginning of each div including the width and border both of which remain constant.
- The border size below is a uniform size of 5px for each of the divs.
- Note that the left & right side edges of the text in each of the divs line up with the side edges of the text in the other divs. This is because the divs have a uniform width specified in em's.
- Note that any, all, or none of these properties can be applied to an element.
- Also, these properties can be applied to any element.
- The parts of the box model:
- The text is the content.
- Each div has the same text (other than the listing of the padding, border, and margin sizes).
- The area with the background image of the very stylized ampersand ( & ) with a linear gradient is the padding.
- The dark line is the border.
- The solid pale green is the margin.
- The text is the content.
- The areas below are discrete div tags, each with different margin and padding settings.
width:35em;padding:0; border:5px; margin:100px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
width:35em;padding:25; border:5px; margin:75px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
width:35em;padding:50px; border:5px; margin:50px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce a liquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce a liquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
width:35em;padding:75px; border:5px; margin:25px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
width:35em;padding:100px; border:5px; margin:0px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
Individual Padding and Margin Properties
- K03d- (1:03)