border-box css
#example1 {
box-sizing: border-box;
}css box-sizing
/* Always keep this code inside your css file*/
*{
box-sizing: border-box;
}
.div-1{
/* width: 100%; Default - Block Element*/
padding: 10px;
box-sizing: border-box;
/*
content-box is default for box-sizing
content-box will remove border-box effect.
*/
}
/*
after applying padding [border also will increase the width]
10px added to left and right from padding
the .div-1 width is now 100% + 20px, and that may cause errors in your layout
according to your work.
to solve the problem and force the width to be as i give to it
we use box-sizing => our div width will not be affected by padding or border
*/html box
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.box {
height:5px;
width:5px;
background-color:blue;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
color:blue;
border-width: 15px 15px 15px 15px;
border-color: blue;
border-style: solid;
border-radius: 70%
outline-color: blue;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
</style>
<div class="box">
<h1 style="color:black;position:absolute;font-family:helvetical;font-size:20px;left:20px;bottom:325px;">Your Text</h1>
</div>
</body>
</html>box sizing css
/*universial selector example to include padding, border, and margin
in all box sizing totals*/
* {
box-sizing: border-box;
}
/*example of div that will total 100% and not exceed it because it
is using the border-box property*/
div {
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
margin: 10px;
}box sizing
html {
box-sizing: border-box;
}
*,
*:before, *:after {
box-sizing: inherit;
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
