Box Model in CSS

Box Model in CSS

八月 31, 2020

Dark Mode

Box Model

1.consists of margin border and padding.

image-20200831090330423

2.default width property: is designated to the content box

3.border box property:is designated to the entire box(including padding and border)

4.box-sizing will not be inherited

Star selector: Universal selector without being overridden (Often used to reset browser default setting)

1
2
3
4
*{
box-sizing: border-box;
}
/* universal selector */

5.horizontal margin is cumulative (A on the left and B on the right)

6.Vertical margin won’t add up, the larger margin wins (2 margins collapsed)

Problem: Content overflow

image-20200831093050191

this is because the content of the box is restrained in a very tiny place

1
2
3
4
5
6
7
#box{
width: 20px;
height: 20px;
}
/*
<div id = box>Lorem ipsum dolor sit amet</div>
*/
To fix:
  1. overflow parameter (by default is set to visible)

    1
    2
    3
    4
    #box{
    overflow: auto;
    }
    /* width scroll bar */