- What is the difference between Margin, Border, and Padding? *** Margin - Margin is the distance away from the content box to the other object that is outside of the content box. *** Border - Border is the line in between margin and content. *** Padding - Padding is the distance away from the object inside the content box. - What are the best practices associated with using classes vs. ids? *** classes - Classes are for the items' CSS properties will be repeatly used through out the whole website. *** ids - Ids are for an item that is very unique through out the website. - What are the differences between relative, absolute, and fixed positioning? (Resources are from MDN. I reference it from MDN because I had hard time with this concept. I would like to review it in the future.) ***static - This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply. ***relative - This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined. ***absolute - Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins. ***fixed - Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. *** sticky - The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.
CSS: Border, Padding, and Margin