FAQ: CSS Display and Positioning - Inline Display

This community-built FAQ covers the “Inline 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 Inline 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!

What is the benefit to make a block element an inline element?

1 Like

Would it be accurate to say that inline elements are counted as content by block element

sometimes putting elements in different codes with separate the paragraph putting it inline will keep the flow of text from breaking

1 Like

If inline-block combines on same line & adding heights & widths, can you not amend width & height on inline elements? I have played around and not been able to. Would it then be best to place it in an inline-block?
thanks
Andrew

"In the example above, the <em> element is inline , because it displays its content on the same line as the content surrounding it, including the anchor tag. This example will display:

To learn more about inline elements, read MDN documentation."

Um… so does the rest of the sentence…

In the inline display explanation, it says that inline elements such as <a>, “cannot be altered in size with the height or width CSS properties”.

In the previous exercise however we edited a Dave’s Burger website. In that it had a button at the bottom with a class of “button” that was an <a> tag:

<a href="#" class="button">ORDER NOW</a>

In the CSS for this website the “button” class had the following properties:

.button {
border-radius: 4px;
color: #05A8AA;
display: block;
font-weight: 700;
width: 200px;
padding: 20px;
margin: 40px auto;
border: 1px solid blue;
}

Width is defined here for the button that is an <a> tag.

Could you please explain why width is ok to be used in this case?

Thank you.

Hello Markholding,

It’s a good question and the lesson said clearly it’s impossible to set the height and width of an inline element.
anchor’s element is by default inline so you’re totally right, but look better the CSS code you post and i’m sure you’ll find why the height and width property can be use in this case… There are a " display: block ", so the anchor is not a inline element but a block element in this case :wink:

Sorry for my english :slight_smile:

5 Likes

Thank you for your reply. That makes sense now. Thanks

In the example, both the <em> and <a> elements are inline. When writing plain text in HTML without using any tags, it will also be inline. This is why the whole sentence is on the same line

2 Likes

Most of the time, when you want to make an element inline, you would use the inline-block value as it is more flexible. The only reason you would use inline is if you specifically don’t want the element to have an editable width and height

2 Likes

I understand the reason why strog or em are inline elements but in wich cases would i need h1 or div as an inline element?

Hi Data! I was wondering the same thing. I found this and it helped me understand the concept. I hope it helps you as well.

The more i keep learning it gets more interesting how some things can be change and some things cant.
It would be nice if all could be a (block) element so anything could be moved around how you want in CSS.

Look at this-

W.T.F?