BasicsIntroduction Adding styles Selectors Headings and Text Lists Links Tables Colors Background Box Model Fonts Icons Display Position Overflow Align Images Tool tips Flex
AdvancedShadows Rounded Corners Units Specificity Responsive design Media Queries Grid Animations Psuedo elements CSS variables and functions SASS and SCSS
MiscellaneousCSS Templates CSS Interview QnA
Box model in CSSIf you understand box model, it will be very easy for you to write css code.
ContentAs you can see in above image, box in azure color has a width of 100px (content area). Then padding of 10px is applied from each side followed by green border. So total width of box = 100px + 2* (padding width + border width) = 122px
box-sizing propertyIn above example, we have seen that width of element was set at 100 px but actual width rendered by browser was 122px (due to extra border and padding). To fix this behaviour, we can use box-sizing property with value set to 'border-box'.
ContentAs you can see in above box(with boxSizing:'border-box'), width rendered by the browser is 100px. This includes border as well as padding. So in short, browser allocates the space for border and padding (from 100px) and remaining space is given to content area. So content width is 78px. Because 22px was allocated to border and padding.
- Element actual width = Element width + padding-left + padding-right + border-left + border-right
- box-sizing property : content-box|border-box|initial|inherit
- By default, element width/height changes if we manipulate border or padding
- When border-box is used, element width/height does not change if we manipulate border or padding
Web development and Automation testing