Inline Elements: only occupy the amount of space they need for its content and nothing more. They can be side by side with one another.
- Occupies only the space necessary for its content.
- Causes no line-breaks after or before the element.
- Box model applies in a different way: heights and widths do not apply.
- Paddings and margins are applied only horizontally (left and right).
- Default elements: a, img, strong, em, button, etc.
- With CSS: display: inline;
Block Level Elements: occupy all the space they can and create line break spaces after them.
- Elements are formatted visually as blocks.
- Elements occupy 100% of parent element’s width, no matter the content.
- Elements are stacked vertically by default, one after another.
- Default elements: body, main, header, footer, section, nav, aside, div, h1-h6, p, ul, ol, li, etc.
- With CSS: display: block;
Inline-Block Elements:
- Looks like inline from the outside, behaves like block-level on the inside.
- Occupies only content’s space.
- Causes no line-breaks.
- Box-model applies as showed.
- You can still set heights and widths, and use margins and paddings.
- With CSS: display: inline-block;
- Works great with adding space around anchor tags with links placed side by side.
You can chain two sudo classes (link and last-child) together without any problem. The following shows how to remove the margin-right spaces from your last made navigation:
nav a:link {
margin-right: 30px;
margin-top: 10px;
display: inline-block;
}
nav a:link:last-child {
margin-right: 0;
}