Friday, March 15, 2013

Interactive Media: More CSS

Since it is around dinner time, and I'm feeling pretty hungry, I think that the best way to explain what the difference between padding and margin in CSS is with the example of a burger. Think of the margin as the bun of your burger, it sits on the outside of your burger and protects the area around that burger from bumping into other burgers or items you might not want touching your burger. In this way, the margin sits on the outside of the element and dictates how close or far away it is from other elements. Now let's pretend that the ketchup/mustard/whatever is the border. This comes right after the margin, or the bun. The border is then followed by the padding, in this case, the padding might be whatever lettuce, cheese, onion, tomatoes you put on your burger. The padding sits inside the margin between the content (the actual hamburger) and the border (your ketchup/mustard). The padding then, is the given distance between the content and the border, within the margin. So it looks like this:


Or in burger analogies: 


Padding is helpful when you need to give content a little bit of room to breathe, and is particularly useful when using background colors and borders. Margins on the other hand, prevent content from bumping into other elements as well as the the edge of the browser window. Margins are EXTREMELY important for web design with CSS.
Onto the next question. There are several types of positioning within CSS that we should be aware of. I list and briefly describe three of them below.

1) Static positioning: This is the normal position that the elements are in as they naturally appear on the page. They have not been manipulated in regards to positioning when they are in this state. 

2) Relative positioning: Relative positioning is pretty straightforward to understand. If you move an element, it moves relative to its original spot in normal flow. This means that elements with relative positioning impact the content around them. This type of positioning doesn't always yield the results you might want, and therefore is more used as context for absolute positioning. 

3) Absolute positioning: A far more flexible option, these elements are removed from the document flow and then positioned around the browser rather than in regards to content around them. Unlike relative positioning, there aren't awkward gaps left over by the positioned element, and therefore this option will usually yield a more desirable aesthetic result. 

No comments:

Post a Comment