1/* Always keep this code inside your css file*/
2*{
3 box-sizing: border-box;
4}
5.div-1{
6 /* width: 100%; Default - Block Element*/
7 padding: 10px;
8 box-sizing: border-box;
9 /*
10 content-box is default for box-sizing
11 content-box will remove border-box effect.
12 */
13}
14/*
15 after applying padding [border also will increase the width]
16 10px added to left and right from padding
17 the .div-1 width is now 100% + 20px, and that may cause errors in your layout
18 according to your work.
19 to solve the problem and force the width to be as i give to it
20 we use box-sizing => our div width will not be affected by padding or border
21*/
1/*universial selector example to include padding, border, and margin
2in all box sizing totals*/
3* {
4 box-sizing: border-box;
5}
6/*example of div that will total 100% and not exceed it because it
7is using the border-box property*/
8div {
9box-sizing: border-box;
10width: 100%;
11border: solid #5B6DCD 10px;
12padding: 5px;
13margin: 10px;
14}
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Page Title</title>
5 </head>
6 <body>
7 <style>
8 .box {
9 height:5px;
10 width:5px;
11 background-color:blue;
12 padding-top: 30px;
13 padding-right: 30px;
14 padding-bottom: 30px;
15 padding-left: 30px;
16 color:blue;
17 border-width: 15px 15px 15px 15px;
18 border-color: blue;
19 border-style: solid;
20 border-radius: 70%
21 outline-color: blue;
22 margin-top: 10px;
23 margin-bottom: 10px;
24 margin-right: 10px;
25 margin-left: 10px;
26 }
27 </style>
28 <div class="box">
29 <h1 style="color:black;position:absolute;font-family:helvetical;font-size:20px;left:20px;bottom:325px;">Your Text</h1>
30 </div>
31 </body>
32</html>
1html {
2 box-sizing: border-box;
3}
4
5*,
6*:before, *:after {
7 box-sizing: inherit;
8}