3] Tip 0s Did you know? CSS Box Model3] ve The Box Model means that everything in CSS is presented as a box and is being formatted as a box. Each element (paragraph, span, div, and so on) has its own box that may be configured using the width or height. Once an element is nested in another element, it is said that boxes within boxes. Each element is composed of several layers, including the content, padding, margin, and border. Margin3] ve Margin the space outside an element's border. Border is a line between the margin and the padding. Padding The space between and element's border and its content. Content can be represented as the text, images, etc that appears. Box Model Display Type Boxes have an inner and outer display type: The inner display type determines how elements within the box are laid out. By default, elements inside a box are laid out in normal flowand act as blocks. The inner display type can be altered. Any direct children of this parent box will become flex item.3] ve The outer display type displays element with its default block state which break onto a new line. Padding and margin will cause other elements to be pushed away from the box. Some HTML elements, such as and , use block as outer display type by default. Seen On a lighter note, we can say the cloth we wear represents border, the space between our clothes and body can be equated to padding. Since we are inside the cloth represented as a confined box, so the space between your clothes and the box limit is the margin, while the body is the content.3] ve Undersanding the concept of Box Model help us layout our pages efficiently. | hope you find this helpful, use the comments if you do find it helpful or have any suggestion.