The Display Property

Question 1

What does the display property do?

Answer 1

Determines how an element’s box is rendered in the browser.

Can be inline, block-level, and inline-block.

Question 2

Describe inline elements.

Answer 2

• Doesn’t start on a new line and usually does not contain additional elements, but instead just contains text.
• You can’t explicitly set the width, height, margin, or padding of an inline element; instead, its dimensions are determined by how much space its contents require.

Question 3

Describe block-level elements

Answer 3

• Gets displayed on a new line (and takes up the whole available line)
• May contain additional block-level or inline elements
• And its height and width can be explicitly set.
• By default, block-level elements will take up the entire width of whatever element they appear inside of, but we can override this by explicitly setting the width or max-width property on an element.

Question 4

Describe inline-block elements.

Answer 4

• Displays inline
• CAN give it an explicit width, height, margin and padding.
• Can be a good approach when you need to create elements with a set width, but also need them to display side-by-side.

Question 5

How can you horizontally center a block-level content within some parent element?

Answer 5

margin-left: auto;

margin-right: auto

Question 6

How can you center inline elements within a block element?

Answer 6

text-align: center;