css box sizing code example

Example 1: border-box css

#example1 {
  box-sizing: border-box;
}

Example 2: * box-sizing border-box

*{
box-sizing: border-box;
}

Example 3: textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; }

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
}

Example 4: 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>

Example 5: box sizing

html {
	box-sizing: border-box;
}

*, 
*:before, *:after {
	box-sizing: inherit;
}

Example 6: box sizing border box

*{
 box-sizing: border-box;
 }

Tags:

Css Example

Recent Posts