Learn Basic CSS by Building a Cafe Menu - Step 74

HTML-CSS
1

Tell us what’s happening:

No problem with the course, its great. but i have question regarding padding property.

i see padding is like a box or square. and inside it, are content.
but what im confused is, why when i decrease the padding number on body element, the content is bigger. but when i decrease it on menu element, it become bigger(?)

Your code so far

/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 90px;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 50px;
  max-width: 500px;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

h1, h2 {
  font-family: Impact, serif;
}


/* User Editable Region */

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18x;
}

/* User Editable Region */


.flavor, .dessert {
  text-align: left;
  width: 75%;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 74

1 Like
2

Margin vs Padding. When designing a website two of the CSS… | by Isaac Chavez | Medium
Think of margin, border and padding like it is in this picture. Increasing padding will reduce the amount of space for content, if your element has a fixed size.

What can be tricky though, is that your other elements like h1, h2 have a selected font-size, which css will try maintain. On the other hand, your menu item has a relative width, set with percentage, which css will also try to maintain. So it is possible for it to behave in a strange way, if one style is overriding the other.

I dont know if that was helpful or the most precise way to put it, but hope it helped :sweat_smile:

1 Like
3

thanks for answering, but i still don’t completely get it. :sweat_smile:

but let me make it clear, from my POV.
shouln’t padding make a distance between its border and the p element?

but margin are the one making distance between element to the other element?

4

i just learn new thing! thanks. but if it set to px. the css will still try to maintain like any other property and value right?

5

It is still a bit unclear to me where your doubt is. But just remember that each element has its own padding. So the body padding will be the space between the limits of the body and the content inside the body. While the padding of the menu element will be the space between the limits of the menu and the content inside it (h1, h2, p). And your menu width will try to fill 80% of the body. And finally if you are giving values that will not fit restrictions of other style attribute values, they will end up overriding each other, getting hard to understand.

2 Likes
6

yeah its hard to explain with basic english :sweat_smile:. but that info really helps.
btw where did you learn this css thing?

like each element have its own padding. Where did you get that kinda knowledge?

1 Like
7

Well, I am not an expert myself. I just keep creating one projet after another and talking to people and reading stuff… then i figure stuff out as I go hahaha. Good luck going on!

8

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