box in css code example

Example 1: how do i make a boxin html

<div style="width:500px;height:100px;border:1px solid #000;">This is a rectangle!</div>

Example 2: border-box css

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

Example 3: 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 4: how to style rule to apply the Border Box model css

header, ul, nav, li, a /* other elements */{

 display: block;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

Example 5: css box model

MDN (Mozilla Developer Network)
Probably the best place for an in-depth explanation of
web related technologies.

See the link below regarding the CSS BOX MODEL

Tags:

Html Example

Recent Posts