CSS: Box-Model

The ‘CSS Box Model” is a set of rules that defines how every page on the internet is rendered. Each element of the HTML document is treated as a “box” with a bunch of different propeties that determine where on the page that box will go.

Using HTML in this manner allows search engines to understand the structure of our webpages, make our sites responsive as well as do all the cool animations and interactivity stuff with Javascript

The Box Model is made up of 4 core element

• Content - The text, image, or other media content in the element.
• Padding- The space between the box’s content and its border.
• Borders - The line between the box’s padding and margin.
• Margins - The space between the box and surrounding boxes.

Boxes themselves can either be blocks or inline. Box types can be changed bu using the display CSS attribute

Block Elements

• Block boxes always appear below the previous block element. This is the “natural” or “static” flow of an HTML document when it gets rendered by a web browser.
• The width of block boxes is set automatically based on the width of its parent container. In this case, our blocks are always the width of the browser window.
• The default height of block boxes is based on the content it contains. When you narrow the browser window, the <h1> gets split over two lines, and its height adjusts accordingly.
• Inline boxes don’t affect vertical spacing. They’re not for determining layout — they’re for styling stuff inside of a block.
• The width of inline boxes is based on the content it contains, not the width of the parent element.

Padding

This defines the padding between the content and the border

h1 {
   padding: 50px;
}

That would put 50 pixels of space on each side of the heading

p {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

Is how you’d specify padding on a particular side. There are also shorthand formats. Naming just two values for a padding key would set the padding on the vertical and horizontal sides, while 4 values would set the padding for all sides starting from the top and going clockwise.

Borders

Borders set the line around an element are this is done with a different syntax

To set a border of a thin grey line one would code

h1 {
  border: 1px solid #5D6063;
}

Like padding, there are -top, -bottom, -left, and -right variants for the border property. Borders are common design elements, but they’re also invaluable for debugging. When you’re not sure how a box is being rendered, add aborder: 1px solid red; declaration to it. This will clearly show the box’s padding, margin, and overall dimensions with just a single line of CSS. After you figured out why your stuff is broken, simply delete the rule.

Margins

Margins define the space outside of an element’s border. Or, rather, the space between a box and its surrounding boxes. Like padding but outside of the border. Margins and padding can accomplish the same thing in a lot of situations, making it difficult to decide which one is the “right” choice. The most common reasons why you would pick one over the other are:

• The padding of a box has a background, while margins are always transparent.
• Padding is included in the click area of an element, while margins aren’t.
• Margins collapse vertically, while padding doesn’t (we’ll discuss this more in the next section).

Inline elements ignore all vertical margins but do not do the same for vertical padding

Another quirk of the CSS box model is the “vertical margin collapse”. When you have two boxes with vertical margins sitting right next to each other, they will collapse. Instead of adding the margins together like you might expect, only the biggest one is displayed.

Sometimes you do want to prevent the margins from collapsing. All you need to do is put another invisible element in between them. Also padding doesn’t ever collapse, so an alternative solution would be to use padding to space out our paragraphs instead of the marginproperty. A third option to avoid margin collapse is to stick to a bottom-only or top-only margin convention. For instance, if all your elements only define a bottom margin, there’s no potential for them to collapse. Finally, the flexbox layout scheme doesn’t have collapsing margins, so this isn’t really even an issue for modern websites.

<div> and <span>

<div> and <span> are “container” elements that don’t have any affect on the semantic structure of an HTML document. They do, however, provide a hook for adding CSS styles to arbitrary sections of a web page. For example, sometimes you need to add an invisible box to prevent a margin collapse, or maybe you want to group the first few paragraphs of an article into a synopsis with slightly different text formatting. The only real difference between a <div> and a <span> is that the former is for block-level content while the latter is meant for inline content.

Content Boxes and Border Boxes

The width and height properties only define the size of a box’s content. Its padding and border are both added on top of whatever explicit dimensions you set. This explains why you’ll get an image that’s 244 pixels wide when you take a screenshot of our button, despite the fact that it has awidth: 200px declaration attached to it.

Fortunately, CSS lets you change how the width of a box is calculated via the box-sizing property. By default, it has a value of content-box

Aligning Boxes

There are three methods for horizontally aligning block-level elements: “auto-margins” for center alignment, “floats” for left/right alignment, and “flexbox” for complete control over alignment. Yes, unfortunately block-level alignment is totally unrelated to the text-align property.