Learn basic CSS by Building a Café Menu: Step 41-42

HTML-CSS
1

(I already passed this section and know what to do)

However my question is why does this work? Is this just a display: inline-block ; thing? Or does this work with all < p > elements (that all < p > will be closer than usual if you put it together and not on a separate line?)

My biggest question is why does the width element move inwards but it moves outwards when it has to do with text?
Here is the code:

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}

.item p {
display: inline-block;
}

.flavor {
text-align: left;
width: 50%;
}

.price {
text-align: right;
width: 50%;
}

2

I’m just a beginner, let me try to help.

Every element has a “size” and behavior, inline, block; when you use the inline: block, they behave as blocks, in a line, really box after box. If you remove the flavor and price classes, you can see that they start on the left, and are all grouped one after the other.

Another thing is that the p element is by default a block-level element, which means that every p element even if on the same line, will each occupy a new line. Using the display: inline-block we avoid that.

I’m not sure what you’re asking here, if you don’t mind please ask again differently.
The width applies the size to the “block” of the element, see this image:

After making both p elements inline-blocks, we align them to the left and right, and tell them each to occupy 50% of the space available. You can see that if you remove the “align-right” and “align-left”, they will still occupy 50% of the available space, though the text will be centered in each “box”.

1 Like
4

Yes there are quirky ways HTML handles whitespaces (this includes space , tabs and new lines) that lead to some quirky solutions. Note that this only happens in Inline element

When you do this

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

There are white space in between every </a> and <a href="#"> even though you didn’t mean that and you only want to make a newline for the code.

One of the solution is to remove the “whitespace” and it can look weird like this

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

More weird solution here:

5

I’m not quite sure if I get what you mean by inwards and outwards but try to tinker around with the inspect element button to see the corresponding element sizes.
image

You can also use outline: solid 1px black to display their bounding boxes and debug the size, margin, and widths. Outline does not add to the overall size of the element hence that is better than using border.

.item p {
  display: inline-block;
  outline: solid 1px black;
}

image

Then you can tell which is moving inwards or outwards. (i still dont know exactly what you mean by this haha)

Hope this helps, Feel free to ask us another question

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.