Test your skills: sizing

MDN Learn
1

Task 2:
Task Two

This task has a box, which contains another box. Your task is to make the inner box 60% of the width of the outer box. The value of the box-sizing property is set to border-box , which means that the total width includes any padding and border. You should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated.

Try updating the live code below to recreate the example as displayed in the image:

This is my version however I want to try understand a little more but i do not understand the box-sizing and border box part. Also it states you should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated. How would I do this???

I have done this:

  • {
    box-sizing: border-box;
    width:
    }
    .inner {
    margin: 0%;
    padding: 15%;
    }

what would I be missing?

The above was task 2 however if we go down to task 3:
Would i just need to add a max-width for the hot air balloon image to make this fit inside the box element. However to make the star width the same would i need to add a min-width without over-pixelating.

Thank you so much who ever try’s to help.

2

Hello @UnknownScript
check this

.inner {
width: 50%;
padding: 10%;
}

no need to do anything for the * selector

for box-sizing to better get it is to use the inspector then try to change the border size of element and see in the layout the size of the elelemnt

so simplicity i ignored the inline and block box thing

let us assume you have element width = 100
so if you choose border-box and you set the border to 10 and padding to 10
then the element size will still 100 divide as follow 80 for element content 10 for border 10 for padding

but if you choose content box then the element whole size will be 120 divided as follow element content will be 100 + 10 for border + 10 for padding

another thing i did for simplicity i assumed here that padding is from one side as if it padding-right only in case we add padding-left also then you need to add another 10 for it
same thing for border

but i think best way to learn is to try it and check the inspector that how i learn it

for the task 3
max-width:100%; would do the trick for both
as it mean set the width to 100% of the parent as long as it does not make the image get width more than it’s acutl 100% width

hope that help and have a nice day :slight_smile:

3

Thank you for the reply. A question I also have regarding this would be:
I know it would come down to preference, but what do you believe is a more effective or better method? Would this be to use content-box or border-box?

just to confirm with the border-box the border and paddings are included within the total width and height.

however the content-box: The width & height of the element only include the content . In other words, the border , padding and margin aren’t part of the width or height.

Once again thank you for the advice. @justso

4

there a leason in mdn about css will talk about the best practice atterbuite and value for elements and it will mention the normlizing css

http://necolas.github.io/normalize.css/

this will remove some of the default styling to some of the element

i think the leason in the form section so do not worry you will get to it

by the way even if it atterbuite set certain value it’s fine to change it based on your needs

that’s right

you very welcome and have a nice day :slight_smile: