CSS box model Flashcards
THE BOX MODEL
—————-MARGIN———–
-----------BORDER---------
—————PADDING——————
————–CONTENT—————–
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.
An element’s content has two dimensions: a height and a width.
By default, the dimensions of an HTML box are set to hold the raw contents of the box.
The CSS height and width properties can be used to modify these default dimensions.
e.g. p {
height: 80px;
width: 240px;
}
Border
A border is a line that surrounds an element, like a frame around a painting. Borders can be set with a specific width, style, and color:
e.g.
p {
border: 3px solid coral;
}
Default value for border is = medium none 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.
Border Radius
You can make a circle by having the image the same width and height with the border radius of 50%.
You can modify the corners of an element’s border box with the border-radius property.
e.g. border-radius: 6px;
you can also use % so 50%
Padding
e.g. padding: 10px;
The code in this example puts 10 pixels of space between the content of the paragraph (the text) and the borders, on all four sides.
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.
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
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
Padding shorthand
Padding shorthand lets you specify all of the padding properties as values on a single line:
e.g.
starting with ;
padding-top
padding-right
padding-bottom
padding-left
p.content-header {
padding: 6px 11px 4px 9px;
}
3 values
p.content-header {
padding: 5px 10px 20px;
}
top-padding is 5px;
left and right padding is 10px;
bottom-padding is 20px;
2 values
p.content-header {
padding: 5px 10px;
}
The top and bottom padding is 5px.
The left and right padding is 10px.
Margin
Margin refers to the space directly outside of the box. The margin property is used to specify the size of this space.
e.g.
margin: 5px
Margin specifics
If you want to be even more specific about the amount of margin on each side of a box, you can use the following properties:
margin-top
margin-right
margin-bottom
margin-left
Margin shorthand values are the same as padding shorthand
3 values the top first the the left and right is the same and bottom last e.g. margin: 3px 8px 4px;
2 values the top and bottom are the same and the left and right are the same e.g. margin 5px 7px;
e.g.
Starting with;
margin-top
margin-right
margin-bottom
margin-left
p.content {
margin: 6px 11px 4px 9px;
}
Auto
The margin property also lets you center !content! However, you must follow a few syntax requirements.
e.g. div.headline {
width: 400px;
margin: 0 auto;
}
In order to center an element, a width must be set for that element.
Otherwise, the width of the div will be automatically set to the full width of its containing element.
The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element.
Margin collapse
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.
img-two {
e.g. #img-one {
margin-right: 20px;
}
margin-left: 20px;
}
In this example, the space between the #img-one and #img-two borders is 40 pixels
Unlike horizontal margins,
vertical margins do not add. Instead, the larger of the two vertical margins sets the distance between adjacent elements.
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.
img-two {
e.g. #img-one {
margin-bottom: 30px;
}
margin-top: 20px;
}
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.
In the example above, the width of all paragraphs will not shrink below 300 pixels, nor will the width exceed 600 pixels.
How would you set a minimum and maximum height of an image or elements?
You can also limit the minimum and maximum height of an element:
min-height — this property ensures a minimum height for an element’s box.
max-height — this property ensures a maximum height of an element’s box.
The overflow property controls what happens to content that spills, or overflows, outside its box.
The most commonly used values which are?
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.
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.
What is a technical term for browser?
user agent
Resetting defaults
Note that both properties are set to 0. When these properties are set to 0, they do not require a unit of measurement.
Many developers choose to reset these default values so that they can truly work with a clean slate.
- {
margin: 0;
padding: 0;
}
Visibility
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.
What’s the difference between display: none and visibility: hidden?
An element with display: none will be completely removed from the web page.
An element with visibility: hidden, however, will not be visible on the web page, but the space reserved for it will.
