Kafe Hezam
11,070 PointsWhy 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;
}
Kafe Hezam
11,070 PointsDane Parchment,
That does not answer the question. But, thanks tho!
1 Answer
aiomran
10,366 PointsWidth 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.
Dane Parchment
Treehouse Moderator 9,985 PointsDane Parchment
Treehouse Moderator 9,985 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