html box
snippet in html

how do i make a boxin html

user5047

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

border-box css

user1445

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

box sizing border box

user6681

*{
 box-sizing: border-box;
 }

html box

user7892

<!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>

how to style rule to apply the Border Box model css

user9731

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

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

css box model

user4560


/********************** CONTENT *************************
The box that contains the actual element content like text, 
image, icon, gif, video,... */

tag_name {
  height: 90px;
  width: 200px;
}

/********************** PADDING *************************
Distance between the content and the border. The background color,
of the element will never affect this space. But you can see this by
contrasting with the background color of the parent element that
contains your element*/

tag_name {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

/*OR: */

tag_name {
  padding: 25px 50px 75px 100px;  /* top; right; bottom; left */
}

tag_name {
  padding: 25px 50px 75px; /* top; right_&_left; bottom */
}

tag_name {
  padding: 25px 50px;  /* top_&_bottom; right_&_left */
}

tag_name {
  padding: 25px; /* top_&_bottom_&_right_&_left */
}


/********************** BORDER *************************
You can define a frame for your element's box. You can 
only see the border, after you define a style for that 
property */

tag_name {
  border-width: 5px 70px 10px 28px; /* or border-bottom-width: 10px; ... */
  border-color: blue;  /* or border-top-color: #b52e2e; ... */
  border-style: dotted; /* or dashed, or solid, or ... */
  border-radius: 70%  /* making the corners more rounded */
}

/*OR: */

tag_name {
  border: 5px solid red;      /* all_widths; style; color */
}

tag_name {
  border-left: 6px dotted green;   /* width; style; color */
  border-top: 34px groove yellow;   /* width; style; color */
}


/********************** OUTLINE *************************
It's a line that's drawn around your html element, but 
contrary to the border, the dimensions of the outline 
aren't taken into account. It's drawn around elements, 
outside the borders, to make the element "stand out" */

tag_name {
  outline-width: thin; /* or medium; thick; outline-width: 4px; ... */
  outline-color: blue;  /* or #b52e2e; invert; ... */
  outline-style: dotted; /* or dashed, or solid, or ... */
  outline-offset:   /* making the corners more rounded */
}

/*OR: */

tag_name {
  outline: dashed;  
}

tag_name {
  outline: dotted red;
}

tag_name {
  outline: 5px solid yellow;    /* all_widths; style; color */
}

tag_name {
  outline: thick ridge pink;
}



/********************** MARGIN *************************
This is the distance that separates an html element, 
from the other elements around it. The background color, 
of the element will never afect this space, because the 
margin doesn't have background color. The margin is an 
invisible border or space between two objects */

tag_name {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

/*OR: */

tag_name {
  margin: 25px 50px 75px 100px;  /* top; right; bottom; left */
}

tag_name {
  margin: 25px 50px 75px;  /* top; right_&_left; bottom */
}

tag_name {
  margin: 25px 50px; /* top_&_bottom; right_&_left */
}

tag_name {
  margin: 25px; /* top_&_bottom_&_right_&_left */
}