Answers to 5 CSS Questions that May Confuse You

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 that can help you learn more about CSS.

I’ll leave the link on my Substack newsletter about CSS. 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?

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

.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?

<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>

.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?

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

.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?

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

.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?

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

.parent {
  display: flex;
  height: 200px;
}

.child {
  margin: auto;
}

Answer Yes.

P.S. 💪 Get more free tips about CSS directly to your inbox

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