Capture more control over your CSS layouts starts with one very fundamental concept is the CSS box model.
The box model is what gives detail of the amount of space each element grasp up on the page.
Although it may not showing when viewing a web page,each component in HTML can be viewed as a rectangular box.
your page contains a heading utilizing the h1 component. That is a rectangular box. The paragraph of text underneath it is also a rectangular box.
Furthermore, if those two components are wrapped inside a div, indeed, that implies your two smaller boxes are inside one huge box.
Computing the size of every one of these containers requires something more than estimating the width and height of the content. The container in the box model is really made up of four particular parts that calculate its size.
Watch CSS Layout Video
In our paragraph, this is dictated by the measure of text we have. surrounding that content area is the padding section.
padding is regularly used to give the substance area some space to breathe, by isolating the content from the surrounding border area.
The border of the box is the outer piece of the box. You can consider it giving the rectangular box an outline.
Borders are hidden on most CSS elements by default. when visible, various styles like color and weight can be applied to them.
The margin area is the space around a component that separates it from different elements. It’s really simple for beginners to mix up padding and margin.
The padding creates space inside the box. It’s the space between the content and the border. Margin creates space outside the box. It’s the space around the border.
all through this stage, padding, borders, and margins are significant parts of the CSS box model.
