\
Hey guys!

\
I'd like to ask you a few questions about CSS. But I warn you, they may confuse you. If that happens, I’ve created [a live cheat sheet](https://codepen.io/melnik909/full/LYyXreW) that can help you learn more about CSS.

\
I’ll leave [the link on my Substack newsletter about CSS](https://cssisntmagic.substack.com). You know what to make 😎 Let's go!

\
**Q1.** What is the computed value of the `display` property for the `.child` element in the following example?

\
```markup
<div class="parent">
  <span class="child">I'm a child</span>
</div>
```

\
```css
.parent {
  display: flex;
}

.child {
  display: inline-grid;
}
```

\
**Answer** The correct answer is a `grid` value.

\
**Q2.** What is the gap between the `.child` elements in the following example?

\
```html
<div class="parent">
  <div class="child">I'm a child #1</div>
  <div class="child">I'm a child #2</div>
</div>
<div class="parent-flex">
  <div class="child">I'm a child #1</div>
  <div class="child">I'm a child #2</div>
</div>
```

\
```css
.parent-flex {
  display: inline-flex;
  flex-direction: column;
}

.child:first-child {
  margin-bottom: 20px;
}

.child:last-child {
  margin-top: 10px;
}
```

\
**Answer** The correct answer is `20px` and `30px`.

\
**Q3.** What is the computed value of the `width` property for the `.child` element in the following example?

\
```html
<div class="parent">
  <span class="child">I'm a child</span>
</div>
```

\
```css
.parent {
  display: grid;
  width: 500px;
}

.child {
  display: inline;
}
```

\
**Answer** The correct answer is `500px`.

\
**Q4.** The computed value of the `width` property for the `.child` element is `500px`. True?

\
```html
<div class="parent">
  <span class="child">I'm a child</span>
</div>
```

\
```css
.parent {
  display: grid;
  width: 500px;
  height: 200px;
}

.child {
  margin: auto;
}
```

\
**Answer** No. The computed value is depending on the content.

\
**Q5.** Will the `.child` element be centered horizontally and vertically?

\
```html
<div class="parent">
  <span class="child">I'm a child</span>
</div>
```

\
```css
.parent {
  display: flex;
  height: 200px;
}

.child {
  margin: auto;
}
```

\
**Answer** Yes.

\
**P.S.**
💪 Get more free tips about CSS [directly to your inbox](https://cssisntmagic.substack.com/archive)

❤ Thank you so much, my sponsors: Ben Rinehart, Tanya Ten, and Konstantinos Kapenekakis.

CodePen

Read My Stories

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

Answers to 5 CSS Questions that May Confuse You

Too Long; Didn't Read

Companies Mentioned

@melnik909

RELATED STORIES