A CSS box model is a standard for design layout. It is a given tool programmed into html that allows users to best organize contents spacing and design. There are four main categories for which can be edited, the margin, border, padding, and content. The margin is the area in which the you would like to place the content on the wepage. The border is box that usually declares the space in which will be allocated for the content you want, seperating itself from all the other content. The padding is the innards of the border that places the contents distance from the border. And lastly, the contect, the actual meat and bones of what it is that you want to display.

In CSS Padding is a property which describes the gap or space between content and border, if border is present. Thus any content which has a border surrounding it, then padding property will describe the gap or space from the border surrounding that content to the content which is going to appear inside that border. In case if content doesnt have a border surrounding it, then there is no effect of using padding on that content because there is no border which is actually present for allowing the space from. In CSS Margin is described as a gap or area or space outside of content to the next content which is outside. Margin is responsible for affecting contents which have a border or do not have any border. AS mentioned earlier content which is surrounded by a border, margin will define the area or gap from the border to the next outer content. And if content doesnt have a border then margin will describe the area or gap or space from the content to the next outer content. Therefore the main difference between margin and padding is that padding considers inner area or gap or space and margin considers the outside gap or area or space to the next outer content.

When calculating the width of an element the browser takes a number of things into account. It has to know what the display: property of the element is. The most common values for this property are inline, and block. With inline elements, are only as wide as the content on the element. With block level elements the element takes up the width of it's containing element. This containing element could be the root (html) element of a div with a width of say 400px, So in the first instance the display property has a factor. Then there's the Box Model. Which has width and height properties for the content, the padding, the border and the margin. The total sum of all these values make up the width and height of any element.

When listing the padding it will always take the top, right, bottom, and then bottom pixels. It revolves in a clockwise, so if there are four numbers, it will work as such. If there is only one number then that number will apply for all four sides. If there are only two listed then it can be viewed as it reading the top and right as usual, but then reading the two numbers again for bottom and left; so in this way the first number will be height and the second will be the width. So the command padding: 25px 50px is 25 pixels away from the border on the top and bottom, and 50 pixels away froim the border on both the left and right.