The box model

Question 1

What is the Box model?

Answer 1

According to MDN. When laying out a document, the browser’s rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 2

What is the Content area?

Answer 2

The content area, bounded by the content edge, contains the “real” content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.

If the box-sizing property is set to content-box (default) and if the element is a block element, the content area’s size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

Source MDN

Question 3

What is the Padding area?

Answer 3

The padding area, bounded by the padding edge, extends the content area to include the element’s padding. Its dimensions are the padding-box width and the padding-box height.

The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.

Source MDN

Question 4

What is the Border area?

Answer 4

The border area, bounded by the border edge, extends the padding area to include the element’s borders. Its dimensions are the border-box width and the border-box height.

The thickness of the borders are determined by the border-width and shorthand border properties. If the box-sizing property is set to border-box, the border area’s size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties. When there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behaviour can be altered with the background-clip CSS property.

Source MDN

Question 5

What is the Margin area?

Answer 5

The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.

The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties. When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.

Source MDN

Question 6

What does “box-sizing: content-box;” do?

Answer 6

content-box gives you the default CSS box-sizing behaviour. If you set an element’s width to 100px, then the element’s content box will be 100px wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.

Source MDN

Question 7

What does box-sizing: border-box; do?

Answer 7

border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100px, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search.

Source MDN

Question 8

What is the problem with magic numbers?

Answer 8

For programming in general, magic numbers aren’t desirable. It’s often hard to explain why a magic number works. If you don’t understand where the number comes from, you won’t understand how it will behave under different circumstances.

In other words avoid playing with properties values until the work as you need. Chances are that the values won’t be valid if the screen size changes or if the page loads on a device with a different aspect ratio that the one you are working on.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 9

What is the problem with the following css ruleset?

*,
\::before,
\::after {
  box-sizing: border-box;
 }

Answer 9

If you add third-party components with their own CSS to your page, you may see some broken layouts for those components, especially if their CSS wasn’t written with box-sizing: border-box;. Correcting this can be problematic.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 10

How can you apply box-sizing: border-box to all your site but mitigate issues with added third party components?

Answer 10

\:root {
   box-sizing: border-box;
 }

 *,
 ::before,
 ::after {
   box-sizing: inherit;
 }

Box sizing isn’t normally an inherited property, but by using the inherit keyword, you can force it to be. With the version shown here, you can convert a third-party component into a content-box when necessary by targeting its top-level container:

 .third-party-component {
   box-sizing: content-box;
 }

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 11

Is it recommended to set the element’s height?

Answer 11

No.

Working with element height is different than working with element width. Typically it’s best to avoid setting explicit heights on elements. Normal document flow is designed to work with a constrained width and an unlimited height. Contents fill the width of the viewport and then line wrap as necessary. Because of this, the height of a container is organically determined by its contents, not by the container itself.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 12

What is the normal document flow?

Answer 12

The normal document flow refers to the default layout behaviour of elements on the page. Inline elements flow along with the text of the page, from left to right, line wrapping when they reach the edge of their container. Block-level elements fall on individual lines, with a line break above and below.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 13

What is a block element?

Answer 13

A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a “block”.

Source MDN

Question 14

What is an inline element?

Answer 14

An Inline-level element only occupy the space bounded by the tags defining the element, and vertical space equal to the height of its contents, instead of breaking the flow of the content as block elements do.

Source MDN

Question 15

What are the differences between block-level elements and inline-level elements?

Answer 15

There are a couple of key differences between block-level elements and inline elements:

Content model
Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create “larger” structures than inline elements.

Default formatting
By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.

source MDN

Question 16

Examples of HTML block-level elements (no HTML5 semantic block elements)

Answer 16

• <h1>-\<h6> : This element is used for including headings of different sizes ranging from 1 to 6.
• <div>: This is a container tag and is used to make separate divisions of content on the web page.
• <hr>: This is an empty tag and is used for separating content by horizontal lines.
• <li>: This tag is used for including list items of an ordered or unordered list.
• <ul>: This tag is used to make an unordered list.
• <ol>: This tag is used to make an ordered list.
• <p>: This tag is used to include paragraphs of content in the webpage.
• <table>: This tag is used for including the tables in the webpage when there is a need for tabular data.

Source geeksforgeeks

Question 17

Examples of HTML5 semantic block level elements

Answer 17

• <header>: This tag is used for including all the main things of the webpage like navbar, logos, and heading of the webpage.
• <nav>: This tag helps to navigate through different sections by including different blocks of hyperlinks in the webpage.
• <footer>: This contains all information about the authorization, contact, and copyright details of the webpage.
• <main>: The main content of the webpage resides in this tag.
• <section> : This is used separate different sections in the webpage.
• <article>: This tag is used to include different independent articles on the webpage.
• <aside>: This tag is used to mention details of the main content aside.

source geeksforgeeks

Question 18

Examples of Inline-level elements

Answer 18

• <a>: This tag is used for including hyperlinks in the webpage.
• <br>: This tag is used for mentioning line breaks in the webpage where ever needed.
• <script> : This tag is used for including external and internal JavaScript codes.
• <input>: This tag is used for taking input from the users and is mainly used in forms.
• <img>: This tag is used for including different images in the webpage to add beauty to the webpage.
• <span>: This is an inline container that takes necessary space only.
• <b>: This tag is used in places where bold text is needed.
• <label>: The tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the < label > element, it toggles the control.

source geeksforgeeks

Question 19

What is the problem with setting an element’s height?

Answer 19

When you explicitly set an element’s height, you run the risk of its contents overflowing the container. This happens when the content doesn’t fit the specified constraint and renders outside of the parent element.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 20

How can you control the behaviour of the overflowing content?

Answer 20

With the “overflow” property, which supports four values:

• visible (default value) - All content is visible, even when it overflows the container’s edges.
• Hidden - Content that overflows the container’s padding edge is clipped and won’t be visible. Programmatic scrolling is supported.
• clip - Content is clipped at the element’s overflow clip edge that is defined using the overflow-clip-margin property. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported.
• Scroll - Scrollbars are added to the container so the user can scroll to see the remaining content. On some operating systems, both horizontal and vertical scrollbars are added, even if all the content is visible. In this case, the scrollbars will be disabled (grayed).
• Auto - Scrollbars are added to the container only if the contents overflow.

Note: Specifying a value other than visible (the default) or clip for overflow creates a new block formatting context.

“overflow - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved November 19, 2024.

Question 21

Is it possible to control only horizontal or vertical overflow behaviour?

Answer 21

Yes, You can control only horizontal overflow using the “overflow-x” property, or vertical overflow with “overflow-y”. These properties support the same values as the overflow property. Explicitly setting both x and y to different values, however, tends to have unpredictable results.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 22

Can you use percentage-based heights?

Answer 22

Rarely.

Specifying height using a percentage is problematic. Percentage refers to the size of an element’s containing block; the height of that container, however, is typically determined by the height of its children. This produces a circular definition that the browser can’t resolve, so it’ll ignore the declaration. For percentage-based heights to work, the parent must have an explicitly defined height.

Tip: if you need to set a percentage-based height use viewport-relative vh units

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 23

How can you make the columns of a row share the same height in CSS?

Answer 23

You have 3 options:

• CSS Table Layout
• Flexbox
• Grid

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 24

How can you make a div as a table?

Answer 24

With

display: table;

Question 25

How can a div behave as a table cell?

Answer 25

With

display: table-cell;

Note: the table cell div needs to be within a Div with display: table; property

Question 26

What are the main differences between a block element and a table-cell element?

Answer 26

By default, an element with a table-cell display value won’t expand to a 100% width like a block element will, so you’ll have to declare the width explicitly. Also, margins can’t be applied to table-cell elements.

Question 27

What does min-height and max-height properties do?

Answer 27

The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

Source MDN

The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

Source MDN

Question 28

Why are min-height and max-height useful to define a layout?

Answer 28

Because instead of explicitly defining a height, you can use min-height and max-height properties to specify a minimum or maximum value, allowing the element to size naturally within those bounds.

Question 29

Why doesn’t vertical-align work?

Answer 29

Developers are often frustrated when they apply vertical-align: middle to a block element, expecting it to center the contents of the block. Instead, this declaration is ignored by the browser.

A vertical-align declaration only affects inline and table-cell elements.

• With inline elements, vertical-align controls alignment among other elements on the same line. You can use it to control how an inline image aligns with the neighboring text, for example.
• With table-cell elements, vertical-align controls the alignment of the contents within the cell. If a CSS table layout works for your page, then you can accomplish vertical centering with vertical-align.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 30

how do you center horizontally an inline or inline-* elements (like text or links)?

Answer 30

You can center inline elements horizontally, within a block-level parent element, with just:

.center {
  text-align: center;
 }

Source css-tricks

Question 31

How do you center horizontally a block-level element?

Answer 31

You can center a block-level element by giving it margin-left and margin-right of auto (and it has a set width, otherwise it would be full width and wouldn’t need centering). That’s often done with shorthand like this:

 .center-me {
  margin: 0 auto;
}

Source css-tricks

Question 32

How do you horizontally center multiple block-level element?

Answer 32

If you have two or more block-level elements that need to be centered horizontally in a row, chances are you’d be better served making them a different display type.

If flexbox is supported use it. It is simpler.

 .container {
  display: flex;
  justify-content: center;
 }

If flexbox is not supported we need to apply styles to both the container and the content elements

 .inline-block-center {
  text-align: center;
 }

 .inline-block-center div {
  display: inline-block;
  text-align: left; /* Reset text-align to initial state */
 }

Source css-tricks

Question 33

how do you vertically center a single line of inline or inline-* elements (like text or links)?

Answer 33

Sometimes inline/text elements can appear vertically centered, just because there is equal padding above and below them.

 .link {
  padding-top: 30px;
  padding-bottom: 30px;
 }

If padding isn’t an option for some reason, and you’re trying to center some text that you know will not wrap, there is a trick were making the line-height equal to the height will center the text.

 .center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
 }

Source css-tricks

Question 34

how do you vertically center multiple lines of inline or inline-* elements (like text or links)?

Answer 34

The element the text is in can be a table cell, either literally or made to behave like one with CSS. The vertical-align property handles this, in this case, unlike what it normally does which is handle the alignment of elements aligned on a row.

 .center-table {
  display: table;
  height: 250px;
  width: 240px;
 }

 .center-table p {
  display: table-cell;
  vertical-align: middle;
 }

If something table-like is out, perhaps you could use flexbox? A single flex-child can be made to center in a flex-parent pretty easily.

 .flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
 }

Remember that it’s only really relevant if the parent container has a fixed height (px, %, etc), which is why the container here has a height.

Source css-tricks

Question 35

What is the “ghost element” technique?

Answer 35

It is a technique use to vertically align multiple lines of inline or inline-* elements. A full fixed height pseudo-element is placed inside the container and the text is vertically aligned with that.

 .ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100vh;
  width: 1%;
  vertical-align: middle;
 }

 .ghost-center p {
  display: inline-block;
  vertical-align: middle;
 }

Remember that it’s only really relevant if the parent container (div.ghost-center) has a fixed height (px, em, etc), which is why the container here has a height.

Source css-tricks

Question 36

How do you vertically center a block element of fixed height?

Answer 36

.parent {
  position: relative;
 }

 .child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
 }

Source css-tricks

Question 37

How do you vertically center a block element of unknown height?

Answer 37

It’s still possible to center it by nudging it up half of it’s height after bumping it down halfway:

 .parent {
  position: relative;
 }

 .child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
 }

Source css-tricks

Question 38

How do you vertically center a block element with flexbox?

Answer 38

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
 }

Source css-tricks

Question 39

How do you center a block element of fixed size (width & height)?

Answer 39

Using negative margins equal to half of that width and height, after you’ve absolutely positioned it at 50% / 50% will center it with great cross-browser support:

 .parent {
  position: relative;
 }

 .child {
  width: 300px;
  height: 100px;
  padding: 20px;

 position: absolute;
  top: 50%;
  left: 50%;

 margin: -70px 0 0 -170px;
 }

Source css-tricks

Question 40

How do you center a block element of unknown width and height?

Answer 40

If you don’t know the width or height, you can use the transform property and a negative translate of 50% in both directions (it is based on the current width/height of the element) to center:

 .parent {
  position: relative;
 }

 .child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }

Source css-tricks

Question 41

How can you center a block element with flexbox?

Answer 41

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
 }

Source css-tricks

Question 42

What is the behaviour of negative margins?

Answer 42

Unlike padding and border-width, you can assign a negative value to margins.

The exact behaviour of a negative margin depends on which side of the element
you apply it to.

• If applied to the left or top, the negative margin moves the element leftward or upward, respectively. This can cause the element to overlap another element preceding it in the document flow.
• If applied to the right or bottom side, a negative margin doesn’t shift the element; instead, it pulls in any succeeding element. Giving an element a negative bottom margin is behaves the same as if you gave the element(s) beneath it a negative top margin.

WARNING Using negative margins to overlap elements can render some elements un-clickable if they’re moved beneath other elements.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 43

What is margin collapsing?

Answer 43

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Source MDN

Question 44

When does marging collapsing occur?

Answer 44

Margin collapsing occurs in three basic cases:

Adjacent siblings

The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).

No content separating parent and descendants

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

Empty blocks

If there is no border, padding, inline content, height, or min-height to separate a block’s margin-top from its margin-bottom, then its top and bottom margins collapse.

“Mastering margin collapsing - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 20, 2024.

Question 45

Given this HTML

<div class="wrapper">
 <div class="empty-block">
 <div class="empty-block">< /div>
 <div class="empty-block">< /div>
 </div>
</div>

and this CSS rulesets

.wrapper {
 border: solid rebeccapurple 1px;
}

.empty-block {
 margin: 20px;
}

What will be the height of the div.wrapper element? and what will be its margin?

Answer 45

div.wrapper element will have a height of 20px and a margin of 0px.

Ther reason is because the vertical margins of div.empty-block elements collapse all the way up until it reaches the border of the the parent element (div.wrapper) whose margin can not collapse because it has set a border.

codepen

Question 46

What can prevent a margin from collapsing?

Answer 46

Anything that separates the margin-top of a block from the margin-top of one or more of its descendant blocks and the same with the margin-bottom of a block element and its descendants.

Like border, padding, inline part (aka content), block formatting context created (display, overflow, float, column-span, …), a set height or min-height or clearance

Source MDN

Question 47

Given the following aside with two links:

<aside class="sidebar">
  <a href="/twitter" class="button-link">
  follow us on Twitter
  </a>
  <a href="/facebook" class="button-link">
  like us on Facebook
  </a>
 </aside>

How can you add a 1.5em vertical space the in-between of the a.button-link elements?
Note: the assume all button-link anchors have display:block. In other words treat them as block elements.

Answer 47

Using the adjacent sibling selector to set a margin-top

 .button-link + .button-link {
  margin-top: 1.5em;
 }

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 48

How can you target all elements on the page that aren’t the first child of their parent?

Answer 48

With the lobotomized owl selector

* + *

That’s a universal selector (*) that targets all elements, followed by an adjacent sibling combinator (+), followed by another universal selector. The lobotomized owl targets all elements on the page that aren’t the first child of their parent.

NOTE: You might be worried about the performance implications of the universal selector (*). In IE6, it was incredibly slow, so developers avoided using it. Today, this is no longer a concern because modern browsers handle it well.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 49

What is the difference between

 * + * {
  margin-top: 1.5em;
 }

and

 body * + * {
  margin-top: 1.5em;
 }

Answer 49

If you include body at the beginning of the selector. This restricts the selector to only target items inside the body. If you use the lobotomized owl by itself, it will target the <body> element because it’s an adjacent sibling of the <head> element.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.