FAQ: CSS Display and Positioning - Block Display

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Block Display” exercise from the lesson “CSS Display and Positioning”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Block Display

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

in the “block display” exercise: Why should it be repeated in the footer style that the text should be centered if it is already marked in the h3 style?

1 Like
3

please how can i get these code editor that display code on the web. like the one we using

4

I feel like the statement in this lesson that “block-level elements fill the entire width of the page by default” is misleading?

e.g. in the lesson, if we do:

.question {
  width: 80%;
}

.answer {
  width: 100%;
}

then the answer divs also take up 80% of the width of the page (as you might expect, since question is their parent).

It could equally be that we set the body to be 80% to get the same behaviour from the answer div (and all those parenting it).

Wouldn’t it be more accurate to say that block-level elements fill the entire width of their parent element by default?

5

Maybe you can try CodePen or JSFiddle.

CodePen: [https://codepen.io/]

JSFiddle: [https://jsfiddle.net/]

2 Likes
6

Thanks, these sites are premiums ,
I have found bracket live previews

7

But if you set a narrower width for a child element, it will override the parent element.

Remember: specificity always takes precedence.

3 Likes
8

Why inline Elements Which are Absolutely or Relatively Positioned Behave as Block-level Elements?

9

The instructions in this lesson does not have any link with the concept thought in the lesson. None of the instruction demonstrated the how to use the block display concept

4 Likes
10

Their is also Visual studio code that Codecademy recommends. And then if you want to view your progress just copy and paste “the path” to the url of whatever browser your using and you should be good to go!

12

Is display block any different from the static position??

14

but then it wouldn’t be default behavior. he said

Wouldn’t it be more accurate to say that block-level elements fill the entire width of their parent element by default ?

15

yes, they are completely different properties that affect different things.

display: block will display the element as if it is a block type HTMLElement

position: static will just manually set the position an HTMLElement to it’s default position

16

I agree. It would be more useful to try and add a <strong> ruleset with a display: block; property and check the result.

17

Also the previous lesson… i dont know if there is any QA for this? Pls Fix the lessons Codecademy!

18

I know this was a few years ago, but to add to this just in case anyone is wondering, you can also download an extension on VS that gives you a viewer within the actual application! Just how codecademy does. The extension is called Live Preview by Microsoft. Instead of having to copy the link to the browser. Just a bit more convenient :slight_smile:

1 Like
19

For the second part of the instructions, this is what i wrote for my code:

“Thanks for taking our survey!”

but for some reason the console registered it as incorrect? When I checked to see what I did wrong via the view solution button, apparently it was because of my quotations mark which made no sense to me. Did I miss an html lesson? Or is the console wrong? If it’s a problem with codecademy lets report it to them and get this fixed can someone try this code and see if they get an error as well, thanks in advanced!

image
image1126×531 32.5 KB

20

The solutions accepted by the lesson are usually to the T. If what you’re submitting is not exactly what it is asking for, it will mark it as incorrect. In this case, it only wanted the statement without the quotation marks.

1 Like
21

the instruction here is a mess. if you want to teach the fundamental lesson it is better if you use a simpler snippets than a complete webpage with many elements. it end up being a mess and confusing the beginner with no experience with CSS. before you fix the overlapping elements you just jump to the another display subject and make our eyes feels uneasy to absorb new things.

In my opinion, just use simpler snippet in every lesson and use a full webpage at the end to practice what we have understand. it is much better and less messy.

1 Like
22

The code checking your answer was searching for what they had in between the quotations, but not with the quotations. The sentence itself was what they wanted you to add to the h3 element as the correct answer. The quotations are there just to let you know exactly what you need to type from between them.