Why does given padding pushes the child element?

HTML-CSS
#1

Lets say we have a parent div of maximum width of document, and we have a child div with also maximum width, so child covered the parent div. Now if we put padding-right: 50px and padding-left 50px for example why does it push the child div from inside meaning it decreases its width?
parent div is color red and child is color blue, parent div is 100% width of document.

Screenshot_1
Screenshot_11919×630 17.6 KB

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="CSS/style.css" type="text/css" rel="stylesheet">
</head>
<body>
	
	<div id="wrapper">
		<div id="box">
		</div>
	</div>
</body>
</html>

#wrapper {
	background: rgba(135,45,46,1.00);
	height: 200px;
	padding-right: 50px;
	padding-left: 50px;
}

#box {
	background: rgba(72,175,184,1.00);
	height: 200px;
}
#2

This is how padding works. What else would it do?

Padding adds a margin around the inside of an HTML element where content cannot go. (Margin, on the other hand adds a margin around the outside of the element). Within that padding margin, you’ll see the outer element - you’ll only see inner element content inside the non-padded area. You normally add padding to stop text pushing up against the wall of its outer element, in this case the blue div is being stopped from pushing up against the red wall.

The inner width is still 100%, just 100% of the outer element minus any padding.

Have a look at the CSS Box Model

1 Like
#3

Ok i get it now, i’ll also read that one on wiki. I know box model but when nested in this way it was confusing at first.

#4