CSS Box Model, Layout, and Positioning: Block vs Inline, Padding, Borders, and Margins, Study notes of Life Sciences

Download CSS Box Model, Layout, and Positioning: Block vs Inline, Padding, Borders, and Margins and more Study notes Life Sciences in PDF only on Docsity!

Box Model,

Layout &

Positioning 1

Block Elements vs Inline Elements

Last session, we briefly touched on how CSS uses “boxes” to define the layout of a web page.

Each HTML element rendered on the screen is a box, and they come in two flavors: “block” boxes and “inline“ boxes.

Let's see an example of this

Inline vs Block Boxes

1. 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.
2. 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.
3. The default height of block boxes is based on the content it contains. When you narrow the browser window, the gets split over two lines, and its height adjusts accordingly.
4. Inline boxes don’t affect vertical spacing. They’re not for determining layout—they’re for styling stuff inside of a block.
5. The width of inline boxes is based on the content it contains, not the width of the parent element.

Changing Box Behavior

We can override the default box type of HTML elements with the CSS display property.

display property can have inline or block as its value.

em, strong { background-color: #B2D6FF; display: block; }

Box Model

CSS Box Model gives each box (both inline and block) four properties:

● Content – The text, image, or other media content in the element. ● Padding – The space between the box’s content and its border. ● Border – The line between the box’s padding and margin. ● Margin – The space between the box and surrounding boxes.

This is everything a browser needs to render an element’s box.

The content is what you author in an HTML document, the rest of them are purely presentational, so they’re defined by CSS rules.

Padding

The padding property…you guessed it…defines the padding for the selected element:

h1 { padding: 50px; }

This adds 50 pixels to each side of the heading.

Notice how the background color expands to fill this space.

Padding: Shorthand Format

Typing out all of these properties out can be tiresome, so CSS provides an alternative “shorthand” form of the padding property that lets you set the top/bottom and left/right padding with only one line of CSS.

p { padding: 20px 10px; } Vertical (^) Horizontal

Padding: Shorthand Format

Alternatively, if you provide four values, you can set the padding for each side of an element individually. The values are interpreted clockwise, starting at the top:

p { padding: 20px 10px 15px 5px; } (^) To p

Right Left

Bottom

Borders

Like padding, there are -top, -bottom, -left, and -right variants for the border property:

h1 { border-top: 1px solid red; border-right: 2px dotted green; border-bottom: 3px dashed yellow; border-left: 4px double purple; }

Heading

Borders

You can specify each property of a border separately, or all three together.

h1 { border: 4px dotted green; }

h1 { border-top: 1px solid red; border-right: 2px dotted green; border-bottom: 3px dashed yellow; border-left: 4px double purple; }

h1 { border-width: 4px; border-style: dotted; border-color: green; }

h1 { border-top-width: 1px; border-top-style: solid; border-top-color: red; ... }

Margins vs Padding

Margins and padding can accomplish the same thing in a lot of situations, making it difficult to determine 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).

If none of these help you decide whether to use padding over margin, then don’t fret about it—just pick one. In CSS, there’s often more than one way to solve your problem.

Margins on Inline Elements

watch what happens when we add a big margin to our element

Inline boxes completely ignore the top and bottom margins of an element.

The horizontal margins display just like we’d expect

Positioning

Static Positioning

HTML elements are positioned static by default.

Static elements are positioned in the normal flow of the page

In normal flow, inline boxes flow from left to right, wrapping to next line when needed.

In normal flow, block boxes flow from top to bottom , making a new line after every box.