loading...

7 questions about CSS questions that can confuse you

melnik909 profile image Stas Melnikov ・4 min read

I often meet with people who speak that their CSS skills are excellent. In this moment my devil sits down on my shoulder says, ask him your favorite questions about CSS. In most cases my questions confuse people. So I'd like to share it... Good luck!

Q1. What's the width and height computed value of the span and div elements in the following example?

<body>
  <div>some text</div>
  <div class="sizes">some text</div>

  <span>some text</span>
  <span class="sizes">some text</span>

  <div class="inline-block">some text</div>
  <span class="inline-block sizes">some text</span>
</body>
div {
  display: block;
}

span {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.sizes {
  width: 100px;
  height: 100px;
}

Answer
The first div without class has the computed width value that repeats the width computed value of body element. The height computed value is equal the height of text inside this element. This behavior is default of all block elements.

The first span without class, the span.sizes and the div.inline-block have the width and height computed value that depends on text sizes. This behavior is default of all inline and inline-block elements.

All other elements have the 100px value to the width and height computed value. That's possible because we can set the values of the width and height for block and inline-block elements.

Q2. What's the display computed value of the span elements in the following example?

<body>
  <span class="first-child">some text</span>
  <span class="second-child">some text</span>
  <span class="third-child">some text</span>
  <span class="fourth-child">some text</span>
</body>
span {
  display: inline;
}

.first-child {
  position: static;
}

.second-child {
  position: relative;
}

.third-child {
  position: absolute;
}

.fourth-child {
  position: fixed;
}

Answer
The .first-child and .second-child elements have the inline value. The .third-child and .fourth-child elements have the block value because the absolute and fixed values change the display value to block.

Q3. What's the width and height computed value of the div and span elements in the following example?

<body>
  <div class="relative">some text</div>
  <div class="relative sizes">some text</div>
  <div class="absolute">some text</div>
  <div class="absolute sizes">some text</div>

  <span class="relative">some text</span>
  <span class="relative sizes">some text</span>
  <span class="absolute">some text</span>
  <span class="absolute sizes">some text</span>
</body>
div {
  display: block;
}

span {
  display: inline;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.sizes {
  width: 100px;
  height: 100px;
}

Answer
The div.relative has the computed width value that repeats the width computed value of body element. The height computed value is equal the height of text inside this element. This behavior is default of all block elements.

The div.absolute, span.relative, span.relative.sizes and span.absolute have the width and height computed value that depends on text sizes inside this element.

That's possible because the span.relative and span.relative.sizes are inline elements . The div.absolute and span.absolute is block elements but because they have the absolute value the width and height computed value depend on content sizes.

All other elements have the 100px value to the width and height computed value. Just because they are block elements.

Q4. What's the height computed value of the .parent element in the following example?

<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>
.child {
  position: absolute;
}

Answer
The absolutely-positioned element is removed from the normal document flow and it can't affect the height its parent. So the height computed value of the .parent element is 0.

Q5. What's position of the span elements in following example?

<body>
  <div class="parent">
    <span class="box">some text</span>
  </div>
</body>
.parent {
  position: relative;
  width: 350px;
  height: 350px;
  padding: 50px;
  margin: 50px auto;
  border: 5px solid #222;
}

.box {
  width: 180px;
  height: 180px;
  position: absolute;
  bottom: 0;
}

Answer
The .child sticks to the bottom edge and has the 50px gap from the left edge of the .parent element. This gap is saved because the left or right property isn't set and this element saved original position.

Q6. What's the display computed value of the span elements in the following example?

<body>
  <div class="parent">
    <span class="first-child">some text</span>
    <span class="second-child">some text</span>
  </div>
</body>
.parent {
  display: flex;
}

.first-child {
  display: inline;
}

.second-child {
  display: inline-block;
}

Answer
All span elements has block computed value to the display values because they are inside of the flex container.

Q7. What's the computed width value of the span element in the following example?

<div class="parent">
  <span class="child">element2</span>
</div>
.parent {
  display: flex;
}

.child {
  flex-basis: 250px;
  width: 200px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
}

Answer
The the flex-basis has priority over the width property. But the flex-basis value must be in the range of the min-width(100px) and the max-width (225px) values. In our case the 250px value is greater than max-width value (225px) so it is limited by 225px.

P.S. This post was written with the support of my patrons: Ashlea Gable, Tatiana Ten, Claire Collins, Ben Rinehart.

Posted on by:

melnik909 profile

Stas Melnikov

@melnik909

I help people to learn new things about HTML and CSS on Patreon platform 👉 https://www.patreon.com/posts/34774556

Discussion

markdown guide
 

You need to be clearer about whether you're talking about the margin, border, padding, or content box. For example, in Q5, the question needs to read "What's position of the span elements relative to the parent's padding box in following example?", because using other co-ordinate systems gives different answers. Oh, and it's 50px from the left edge of the padding box, not 20px.

 

Thank you. That's my typo.

 

Also, Q7 should say "What's the computed width value of the span element in the following example?"

 

I completely understand your motivation here ("In this moment my devil sits down on my shoulder says, ask him your favorite questions about CSS.") but strongly discourage doing this. Just listen and nod, they've told you who they are - being viewed as a person who feels the need to prove you know more should be avoided at all costs.

Anyway, thanks for the information.

 

That title is a bit confusing! Lol