CSS Box Model: Height, Width, Text and Font Properties Quiz

SincereRational avatar
SincereRational
·
·
Download

Start Quiz

Study Flashcards

30 Questions

What does the 'border-style' property define?

Style of the border line

Which 'border-style' value will make all four sides of the border use different styles (top right bottom left)?

solid dashed dotted

What unit does 'border-width' property accept?

Relative units and pixels

What is a pre-defined value for setting a thicker border in CSS?

Thick

How can you set the width of all four sides of a border to 20% of the font size in CSS?

.2em

'border-width' property sets the:

Width or thickness of the border line

What does the margin space provide between elements?

Space around the outside of the border

Which property sets the style of a border?

border-style

What is padding space according to the text?

Space around the inside of the border of the element

How can borders be configured according to the text?

With a specific width, color, and style

What does the border-style property define?

The style of the border line

Why might borders be added to elements?

To make appearance more interesting and visually divide areas

What does the 'ex-1' rule specify?

A 20% font size double border

Which side borders are specified in the shorthand rule in the text?

Left and bottom

What property can be used to create rounded corners on borders?

border-radius

If you specify two values for 'border-radius', what corners are defined?

Top-left/bottom-right and top-right/bottom-left

'border: .2em double;' results in what type of border by default?

Black solid border

'border-bottom:.4em double darkgreen;' results in what bottom border by default?

.4em double black

What does specifying three values for border-radius define?

Radius for top-left, top-right, and bottom-left corners

In the box model, what does the padding define?

Space between the element's content and its border

When setting the padding property separately, what does padding-right specifically set?

Padding only on the right side

What does setting padding: 5px 10px 12px; define?

Top padding of 5px, bottom padding of 12px, and both the left and right padding at 10px

Why is it mentioned that you wouldn't normally use all four padding properties separately?

To avoid instances where different paddings override each other

What does specifying two values for padding like .25em .5em; define?

.25 times font size for both top and bottom, .5 times font size for both left and right

What property is used to define the shadow's horizontal offset?

shadow-offset-x

In the CSS box model, what does setting padding:.5em; define?

Equal padding on all four sides

When using box-shadow, which property is required to specify the vertical position of the shadow?

shadow-offset-y

What does the 'card' class in the example represent?

A container with a box shadow effect

How is the border described in 'border: 2px solid navy;'?

Thin solid border in navy color

What is the purpose of specifying padding, margins, and borders in CSS?

To control the layout and spacing of elements

Test your knowledge on CSS box model which allows you to add borders, margins, and padding around an element's content. Understand the concepts of margin space, padding space, and how they affect the layout of web elements.

Make Your Own Quizzes and Flashcards

Convert your notes into interactive study material.

Get started for free

More Quizzes Like This

CSS Box Model Quiz
3 questions

CSS Box Model Quiz

AwestruckSavannah avatar
AwestruckSavannah
CSS Mastery
5 questions

CSS Mastery

WellInformedSugilite2378 avatar
WellInformedSugilite2378
SH1802 CSS Box Model Property
31 questions
Creación de Cajas con CSS en HTML
10 questions
Use Quizgecko on...
Browser
Browser