We’ll talk a lot today about margins and padding, which are, respectively, just ‘margins’ and ‘internal margins.’ That’s the easy part!
We can specify where borders, margins and padding go by explicitly declaring where they go: instead of ‘border: 1px solid black,’ we now know we can do ‘border-bottom: 1px solid black.’ Well, you can also do ‘border-top,’ ‘border-left,’ and ‘border-right.’
The same logic goes for margins and padding: ‘margin-left,’ padding-bottom’ – these are all valid.
This being computer code, there is also (of course) a shorthand way of declaring multiple values:
padding: 30px;
This will add 30px of padding to the top, bottom, left, and right.
margin: 20px 40px;
This will add 20px margins to the top and bottom, and then 40px margins to the left and right.
padding: 10px 0 20px 30px;
This would make the top have 10px padding, the right have none, the bottom have 20px padding, and the left have 30px padding. So Top, Right, Bottom, Left, or TRBL (trouble).
The collective properties of margin, padding, border and width combine to make up the box model.
We’ll also be talking about Block Vs. Inline elements. Every HTML element is either set to block or inline automatically; you can alter that setting via CSS. More on the difference between Block and Inline here: