Box Model

Question 1

Display
how many ways can an element be displayed ?

Answer 1

1: Block Level element
2:Inline elements
3:inline, block
4:flex
5:grid

Question 2

What is the Box Model?

Answer 2

According to the Box Model concept, every element on page is rectangular box and may have,
1:width
2:height
3:padding
4:Borders
5:Margins

Question 3

syntax

Answer 3

div {
border: 6px solid #949599;
height: 100px;
margin: 20px;
padding: 20px;
width: 400px;
}

Question 4

How can We can change an element’s display property value by selecting that element within CSS and declaring a new display property value.

Answer 4

A: P {
display: block;
}

B; p {
display: inline;
}

Question 5

important distinction with inline-block elements is that they are not always touching, or displayed directly against one another. Usually a small space will exist between two inline-block elements. This space, though perhaps annoying, is norma

Answer 5

important distinction with inline-block elements is that they are not always touching, or displayed directly against one another. Usually a small space will exist between two inline-block elements. This space, though perhaps annoying, is norma

Question 6

div {
display: none;
}

Answer 6

using a value of none will completely hide an element and render the page as if that element doesn’t exist. Any elements nested within this element will also be hidden.

Question 7

How does a box model look like ?

Answer 7

1:Margin
2:Border
3:Pading

Question 8

which formula is used to calculate the total width of
an element?

Answer 8

According to the box model, the total width of an element can be calculated using the following formula:

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

Question 9

According to the Box Model, How do we calculate the height of an element?

Answer 9

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Question 10

How to set specifics (width and height ) for styling?

Answer 10

div {
width: 400px;
height: 100px;
}

Question 11

sizing inline-level elements
what do we need to keep in mind when sizing inline- level elements ?

Answer 11

elements will not accept the width and height properties, or any values tied to them.Block and inline-block elements will, however, accept the width and height properties and their corresponding values.

Question 12

Margin and Padding.
1:Depending on what factor does the browser apply margin and padding?
2:The default margins and padding for these elements may differ from what to what ? and what to what
3:The ______ may apply default margins and padding to an element to help with legibility and clarity

Answer 12

1:Depending on the element.
2:They may differ from browser to browser and element to element.
3:The browser

Question 13

1:What does the margin property allow us to do ?

Answer 13

1:It allow us to to set the amount of space that surrounds an element.

Question 14

1:Where does the margin fall?
2:What can margin be used for ?
3:How to write a margin property.

Answer 14

1:Margins for an element fall outside of any border and are completely transparent in color.

2:Margins can be used to help position elements in a particular place on a page or to provide breathing room, keeping all other elements a safe distance away.

3: div {
margin: 20px;
}

Question 15

NOTE:

Answer 15

One oddity with the margin property is that vertical margins, top and bottom, are not accepted by inline-level elements. These vertical margins are, however, accepted by block-level and inline-block elements.

Question 16

Padding.
1:where does the padding property falls and what is it used for.
2: How to write the padding property

Answer 16

1:The padding property is very similar to the margin property; however, it falls inside of an element’s border, should an element have a border. The padding property is used to provide spacing directly within an element. Here’s the code:

2:div {
padding: 20px;
}

Question 17

NOTE:

Answer 17

The padding property, unlike the margin property, works vertically on inline-level elements. This vertical padding may blend into the line above or below the given element, but it will be displayed.

Question 18

Note: Margin & Padding on Inline-Level Elements

Answer 18

Inline-level elements are affected a bit differently than block and inline-block elements when it comes to margins and padding. Margins only work horizontally—left and right—on inline-level elements. Padding works on all four sides of inline-level elements; however, the vertical padding—the top and bottom—may bleed into the lines above and below an element.

Margins and padding work like normal for block and inline-block elements.

Question 19

margin & and padding declaration.

1:There are more than two ways to declare css properties, what are these two ways ?
2:what are the different uses of longhand and shorthand.

Answer 19

1:Longhand and Shorthand

2:Longhand, list multiple properties and values one after the other, in which each value has its own property
div {
margin: 20px;
}
3:shorthand, listing multiple values with one property.
div {
margin: 10px 20px;
}
Note:
Not all properties have a shorthand alternative, so we must make sure we are using the correct property and value structure.

Question 20

Margin & Padding Colors

Answer 20

The margin and padding properties are completely transparent and do not accept any color values. Being transparent, though, they show the background colors of relative elements. For margins, we see the background color of the parent element, and for padding, we see the background color of the element the padding is applied to.

Question 21

Boders

Answer 21

Borders fall between the padding and margin, providing an outline around an element. The border property requires three values: width, style, and color. Shorthand values for the border property are stated in that order—width, style, color. In longhand, these three values can be broken up into the border-width, border-style, and border-color properties. These longhand properties are useful for changing, or overwriting, a single border value.
Note:
Borders can have different appearances. The most common ==style values are solid, double, dashed, dotted, and none, but there are several others to choose from.

Question 22

Individual Border Sides

Answer 22

As with the margin and padding properties, borders can be placed on one side of an element at a time if we’d like. Doing so requires new properties: border-top, border-right, border-bottom, and border-left. The values for these properties are the same as those of the border property alone: width, style, and color. If we want, we can make a border appear only on the bottom of an element:

div {
border-bottom: 6px solid #949599;
}

Question 23

Individual Border Sides

Answer 23

Additionally, styles for individual border sides may be controlled at an even finer level. For example, if we wish to change only the width of the bottom border we can use the following code:

div {
border-bottom-width: 12px;
}