Block, Inline, Block-Inline Elements, Display And Positioning

Question 1

List seven characteristics of Block Level Elements:

Answer 1

1. They are flowed from top to bottom with a line break before and after each block level element.
2. Block level elements are flowed below and to the left of their neighboring block level elements.
3. Block level elements take the width of their parent container by default.
4. Block level elements ignores the vertical align property.
5. Block level elements respects all margin properties.
6. Block level elements take the height of all its children except when the height property is set.
7. The width property can be set on block level elements making it narrower and as such allowing its contents to wrap but not crop.

Question 2

Give eight characteristics of inline elements:

Answer 2

1. Inline elements are flowed horizontally, next to each other, from top left to bottom right.
2. Inline elements are placed to the right of their preceding neighbors and do not move to move the next line unless they “wrap”.
3. Inline elements completely ignore all width and height properties.
4. Inline elements ignore all margin top and margin bottom properties.
5. Inline elements are subject to vertical align and CSS white space settings.
6. For padding, inline element support padding left and padding right properties but padding top and padding bottom properties do not contribute in calculating the height of the inline element from the baseline.
7. Inline elements cleave to the bottom of the baseline where they are being placed.
8. The width of inline elements by default is basically the width of their content plus any left or right padding.

Question 3

What are Inline-block elements?

Answer 3

Inline-block elements are elements that cleave to the baseline like inline elements but they respect the margin top and margin bottom properties like block level elements and they also respect the width and height properties like block level elements and the vertical padding contribute to the calculation of the height of the inline-block elements like the block level elements.

Question 4

List three characteristics of Inline-Block elements:

Answer 4

1. They respect the margin top and margin bottom CSS properties.
2. They respect the width and height properties.
3. The vertical padding contributes to the calculation of the height of the inline-block element from its baseline.

Question 5

List all the possible values for the display property.

Answer 5

1. Inline
2. Block
3. Inline-Block
4. None
5. Flex