CSS CSS Flexbox Layout Flexbox Properties Wrapping Flex Items

Kafe Hezam
Kafe Hezam
10,990 Points
Posted by Kafe Hezam
Kafe Hezam
10,990 Points

Why when there's no padding on the items the items fit in the container??

1- Why when I don't give padding to the items the items fit in the container?

2- When I give the items width the items fit perfectly in the container?

I really appreciate if you can answer these question :) 

*  {

box-sizing: border-box;

}

body {

font-size: 1.35em;

font-family: 'Varela Round', sans-serif;

color: #fff;

background: #e8e9e9;

padding-left: 5%;

padding-right: 5%;

}

.container {

padding: 10px;

background: #fff;

border-radius: 5px;

margin: 45px auto;

box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);

 display: flex;

}


.item {

color: #fff;

/*  padding: 15px;*/          /* no padding */

margin: 5px;

background: #3db5da;

border-radius: 3px;

width: 200px;

}
Dane Parchment
Dane Parchment
9,743 Points
Dane Parchment
Dane Parchment
9,743 Points

(Moderator note): Just so you know when you write the format for code syntax, just type in 3 backticks. You don't have to escape them.

i.e:```

is the proper syntax

Kafe Hezam
Kafe Hezam
10,990 Points
Kafe Hezam
Kafe Hezam
10,990 Points

Dane Parchment,

That does not answer the question. But, thanks tho!

1 Answer

aiomran
aiomran
6,961 Points
aiomran
aiomran
6,961 Points

Width sets the size of the content box. - how much room you want it to take on the screen.

Padding increases the size of the content box AROUND the content text. Padding gives you some extra space around the content if it seems to close (breathing room).

Note* Margin does the same as padding, except it is around the border. For example, by extending the margin you will not extend the background color. Extending the padding, will extend the background color or the size of the border that will be around the content box.

Content > Padding > Border > Margin

Refer to the box model.