FAQ: The Box Model - Padding I

This community-built FAQ covers the “Padding I” exercise from the lesson “The Box Model”.

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

Web Development

Learn CSS

FAQs on the exercise Padding I

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!

Forgive me.
This may be something I need to review in CSS intro, but when trying to apply padding px to the bottom of the list of elements, it doesn’t apply. However, when adding it between the border and border-radius element it seems to work just fine. Can someone please explain this? Is this an “order of operations” rule? Thank You!

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-css-box-model/lessons/box-model-intro/exercises/box-padding-i

What is the default padding if it is not specified?

Let’s say I set the padding of a box to 20px, but I one of the sides to a different value of px… Will that one side rule over the padding? If so, is that the general rule?

The default border is medium none color. This means it just won’t show up because of the none, but if you only substitute the none with a type of border, then you’ll see that the default medium width and color (same as the text color) will automatically be there as default. See exercise 4.

hello!!i am new to coding…was wondering how one can know the exact amount/number of pixels to use when using the padding and margin property.

For some reason I can’t get past the 2nd exercise. Can someone please tell me what’s wrong with my code? Everything seems correct to me. Thanks in advance

1 Like

Yep, looks right to me. Did it get resolved? Sorry, I joined a few days ago and doing this exercise now.

I have a separate question and don’t know how to start a new thread. So asking here:
How do I create a CSS rule where one value applies to two properties? For example, if I want to make padding-top and padding-bottom equal to 20px - how do I do that?

1 Like

Is there a way to combine padding for multiple sides, but not all?
or do you have to do padding-top, padding-bottom, etc. all separately?

One thing i can say to get more acquainted is good to start using the (developer tool) at your dispossal thats one way
ive been able to see what does the padding do…

how to fix line issues my cod is right but the lins are more than its should be?

In CSS, if you set padding for a box to 20px, it means that all four sides of the box will have padding of 20 pixels. However, if you want to override the padding for a specific side, you can do so by specifying that side explicitly.

For example:

.box {
    padding: 20px; /* Applies 20px padding to all four sides */
}

.box {
    padding-top: 10px; /* Overrides the top padding to be 10px */
}

In this case, the top padding of 10px will override the general padding of 20px for that specific side.

Just to name a few…

  1. Design guidelines: If you’re working with a design provided by a designer, they might specify the padding and margin values to use for consistency across the design.
  2. Visual appearance: Adjust the padding and margin until the elements on your webpage or application look visually balanced and pleasing to the eye. You can experiment with different values to see what works best.
  3. Responsive design: Consider how your webpage or application will look on different screen sizes and devices. Use relative units like percentages or viewport units (vw, vh) to make your layout more adaptable to different screen sizes.

@web5770227522 @design8697248739

To achieve that in CSS, you can use the padding shorthand property, which allows you to specify all four padding values (top, right, bottom, left) in one declaration. If you want to set the padding-top and padding-bottom to 20px while keeping the padding-right and padding-left unchanged, you can do it like this:

.element {
    padding-top: 20px;
    padding-bottom: 20px;
}

However, a more concise way to achieve the same result is to use the padding shorthand property like this:

.element {
    padding: 20px 0; /* 20px top and bottom, 0 for right and left */
}

In the padding property, the first value corresponds to the top and bottom padding, and the second value corresponds to the right and left padding.

Padding is akin to a crime against humanity. It usually amounts to a lot of hair pulling. Use it sparingly, and wittingly, if at all.

Whatever container you choose to apply the property, it better be contained in one that has percentage constraints. At least then we know padding is bounded (won’t affect width).

Like it as not, padding is a nightmare waiting to happen. Use at one’s own peril.

Margins do not affect width the same way as padding, and happen outside the borders. Much easier to manage and maintain. Enough said.

16 posts were split to a new topic: Is commitment enough to become a smarter coder?

Hi MTF,

I was working more on understanding classes, and subclasses.

I was able to create this design for an organizer:

Would you be able to help me review it please?

class Organizer {
static startDate() {
const jan1 = new Date(new Date().getFullYear(), 0, 1);
return jan1;
}

static currentDate() {
return new Date();
}

constructor(name, date, time, priority) {
this._name = name;
this._date = date;
this._time = time;
this._priority = priority;
}

numOfDays1() {
const jan1 = Organizer.startDate();
const currentDate = Organizer.currentDate();
const numofdays = Math.floor((currentDate - jan1) / (1000 * 60 * 60 * 24));
console.log(The year is 2024 it has been this many ${numofdays} since January 1st);
}

numOfDays2() {
const nextCommitment = new Date(this._date);
const currentDate = Organizer.currentDate();
const numofdays2 = Math.floor((nextCommitment - currentDate) / (1000 * 60 * 60 * 24));
console.log(It is ${currentDate} and you have this many ${numofdays2} days till your next appointment!);
}

static nextCommitment(date) {
return date; // Just returning the date for demonstration
}

priority() {
if (this._priority.includes(“Star”)) {
console.log(${this._name} is a high priority.);
} else {
console.log(${this._name} is not a priority.);
}
}
}

class Appointment extends Organizer {
constructor(name, date, time, priority, description) {
super(name, date, time, priority);
this._description = description;
}

priority() {
super.priority();
}
}

// Example usage of Appointment class
let appointment1 = new Appointment(“Meeting”, “2024-02-28”, “10:00pm”, “Star”, “Discuss project details”);
appointment1.priority(); // Output: “Meeting is a high priority.”

Your feedback is much appreciated!!
Wrufff thank you Bello!