How to create a box in HTML
Nowadays it is impossible to create an HTML box without involving CSS. In the below example we create a box by means of CSS, which we always create in a separate stylesheet. The creation of an html box in fact starts with the creation of an HTML element. This element can be a div, p elements, a elements or any other element. In short all elements can be used to create the desired HTML box. In the following example we make use of the div element because this is most commonly used:
A box is created by means of our stylesheet by adding the following code to CSS:
width: 100px;
height: 100px;
border: 1px solid black;
}
Important: Margin, padding & border
When creating a new element in HTML the CSS automatically applies a margin, padding and border. The exact measures of these three aspects differ from one browser to another; therefore we would advise you to always make use of the stylesheet to define them in advance. The div/box is enclosed by the padding. The padding on its turn is located between the div/box and the border. Lastly the border is located between the padding and the margin. Magin, padding and border can easily be set to 0 by means of the following CSS:
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0;
padding: 0;
}