box model

Question 1

Name all sections of the box model

Answer 1

width and height: The width and height of the content area.

padding: The amount of space between the content area and the border.

border: The thickness and style of the border surrounding the content area and padding.

margin: The amount of space between the border and the outside edge of the element.

Question 2

An element has 2 dimensions how can we change the height and width

Answer 2

p {
height: 80px;
width: 240px;
}

Question 3

What is a border

Answer 3

A border is a line that surrounds an element, like a frame around a painting.

Question 4

what properties can be set with the border

Answer 4

Borders can be set with a specific width, style, and color

width—The thickness of the border. A border’s thickness can be set in pixels or with one of the following keywords: thin, medium, or thick.
style—The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid.
color—The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.

Question 5

example

Answer 5

p {
border: 3px solid coral;
}

In the example above, the border has a width of 3 pixels, a style of solid, and a color of coral. All three properties are set in one line of code.

The default border is medium none color, where color is the current color of the element. If width, style, or color are not set in the CSS file, the web browser assigns the default value for that property.

Question 6

how can you modify the radius of the box

Answer 6

order-radius property.

div.container {
border: 3px solid blue;
border-radius: 5px;
}

Question 7

what is padding

Answer 7

The space between the contents of a box and the borders of a box is known as padding. Padding is like the space between a picture and the frame surrounding it. In CSS, you can modify this space with the padding property.

p.content-header {
border: 3px solid coral;
padding: 10px;
}

Question 8

what is a use of using the padding

Answer 8

The padding property is often used to expand the background color and make the content look less cramped

Question 9

how can you make the padding more specific

Answer 9

If you want to be more specific about the amount of padding on each side of a box’s content, you can use the following properties:

padding-top
padding-right
padding-bottom
padding-left

Question 10

what is the use of padding short hand

Answer 10

Another implementation of the padding property lets you specify exactly how much padding there should be on each side of the content in a single declaration. A declaration that uses multiple properties as values is known as a shorthand property.

Padding shorthand lets you specify all of the padding properties as values on a single line:

padding-top
padding-right
padding-bottom
padding-left

Question 11

what is the 4 value padding short hand

Answer 11

4 Values

p.content-header {
padding: 6px 11px 4px 9px;
}

In the example above, the four values 6px 11px 4px 9px correspond to the amount of padding on each side, in a clockwise rotation. In order, it specifies the padding-top value (6px), the padding-right value (11px), the padding-bottom value (4px), and the padding-left value (9px) of the content.

Question 12

what is the the 2 value shorthand

Answer 12

2 Values

p.content-header {
padding: 5px 10px;
}

And finally, if the top and bottom sides can be equal, and the left and right sides can be equal, you can specify 2 values. The first value sets the padding-top and padding-bottom values (5px), and the second value sets the padding-left and padding-right values (10px).

Question 13

what is margin

Answer 13

Margin refers to the space directly outside of the box. The margin property is used to specify the size of this space.

Question 14

example of margin

Answer 14

p {
border: 1px solid aquamarine;
margin: 20px;
}

The code in the example above will place 20 pixels of space on the outside of the paragraph’s box on all four sides. This means that other HTML elements on the page cannot come within 20 pixels of the paragraph’s border

Question 15

how to be more specific with the margin

Answer 15

margin-top
margin-right
margin-bottom
margin-left

Question 16

margin shorthand 2 values

Answer 16

2 Values

p {
margin: 20px 10px;
}

And finally, if the top and bottom sides can be equal, and the left and right sides can be equal, you can specify 2 values. The first value sets the margin-top and margin-bottom values (20px), and the second value sets the margin-left and margin-right values (10px).

Question 17

what is auto

Answer 17

The margin property also lets you center content. However, you must follow a few syntax requirements. Take a look at the following example:

div.headline {
width: 400px;
margin: 0 auto;
}

In the example above, margin: 0 auto; will center the divs in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element.

Question 18

What is margin collapse with horozontal collapse

Answer 18

img-one {

One additional difference is that top and bottom margins, also called vertical margins, collapse, while top and bottom padding does not.

Horizontal margins (left and right), like padding, are always displayed and added together. For example, if two divs with ids #div-one and #div-two, are next to each other, they will be as far apart as the sum of their adjacent margins.

margin-right: 20px;
}

margin-left: 20px;
}

Question 19

what is vertical margin collapse

Answer 19

img-one {

vertical margins do not add. Instead, the larger of the two vertical margins sets the distance between adjacent elements.

margin-bottom: 30px;
}

margin-top: 20px;
}

In this example, the vertical margin between the #img-one and #img-two elements is 30 pixels. Although the sum of the margins is 50 pixels, the margin collapses so the spacing is only dependent on the #img-one bottom margin.

Question 20

why do we use the Minimum and Maximum Height and Width

Answer 20

Because a web page can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size. To avoid this problem, CSS offers two properties that can limit how narrow or how wide an element’s box can be sized to:

min-width—this property ensures a minimum width of an element’s box.
max-width—this property ensures a maximum width of an element’s box.

Question 21

what is Over Flow

Answer 21

The overflow property controls what happens to content that spills, or overflows, outside its box.

Question 22

common used values of over flow

Answer 22

hidden—when set to this value, any content that overflows will be hidden from view.

scroll—when set to this value, a scrollbar will be added to the element’s box so that the rest of the content can be viewed by scrolling.

visible—when set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.

Question 23

what is reset defaults

Answer 23

All major web browsers have a default stylesheet they use in the absence of an external stylesheet. These default stylesheets are known as user agent stylesheets. In this case, the term user agent is a technical term for the browser.

Question 24

How to set overflow / scroll

Answer 24

p {
overflow: scroll;
}

In the example above, if any of the paragraph content overflows (perhaps a user resizes their browser window), a scrollbar will appear so that users can view the rest of the content.

The overflow property is set on a parent element to instruct a web browser on how to render child elements. For example, if a div’s overflow property is set to scroll, all children of this div will display overflowing content with a scroll bar.

Question 25

how to resest defaults

Answer 25

Many developers choose to reset these default values so that they can truly work with a clean slate.

• {
  margin: 0;
  padding: 0;
  }

The code in the example above resets the default margin and padding values of all HTML elements. It is often the first CSS rule in an external stylesheet.

Note that both properties are set to 0. When these properties are set to 0, they do not require a unit of measurement.

Question 26

what does the visabillity attribute do

Answer 26

Elements can be hidden from view with the visibility property.

The visibility property can be set to one of the following values:

hidden — hides an element.
visible — displays an element.
collapse — collapses an element.

Question 27

review

Answer 27

Review
1 min

In this lesson, we covered the four properties of the box model: height and width, padding, borders, and margins. Understanding the box model is an important step towards learning more advanced HTML and CSS topics. Let’s take a minute to review what you learned:

The box model comprises a set of properties used to create space around and between HTML elements.
The height and width of a content area can be set in pixels or percentages.
Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties.
Padding is the space between the content area and the border. It can be set in pixels or percent.
Margin is the amount of spacing outside of an element’s border.
Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element.
Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin.
margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width.
The overflow property can be set to display, hidden, or scroll, and dictates how HTML will render content that overflows its parent’s content area.
The visibility property can hide or show elements.