What is CSS Box Model

Expert Posts
, ,
1

The CSS Box Model is a fundamental concept in web development that describes how elements are rendered and displayed on a webpage. It consists of four main components: content, padding, border, and margin.

  1. Content: It represents the actual content of an element, such as text, images, or other HTML elements. The content area is defined by the width and height properties.
  2. Padding: It is the space between the content and the element’s border. Padding can be set using the padding property and can have different values for each side (top, right, bottom, left).
  3. Border: It is a line that surrounds the content and padding of an element. Borders can be styled using properties like border-width, border-color, and border-style.
  4. Margin: It is the space outside the element’s border, creating a gap between adjacent elements. Margins can be set using the margin property and can also have different values for each side.

Here’s an example in HTML format to demonstrate the CSS Box Model using JavaScript:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">This is a box element.</div>
</body>
</html>

In the above example, we define a CSS class called “box” with specific properties for width, height, padding, border, and margin. Then, we create a <div> element with the class “box” to apply those styles. The resulting box will have a width of 200px, height of 100px, 20px padding, a 2px solid black border, and a 10px margin around it.