Lecture 10: CSS Box Model & Positioning

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-10

Lecture 10

CSS Box Model & Positioning

Week 3 | Unit II: CSS Styling & JavaScript
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

Master the CSS box model concept
Understand margin, padding, and borders
Learn different positioning methods
Create complex layouts with positioning
Implement z-index layering

The CSS Box Model

Every HTML element is a box with layers:

+-------------------------------------+
|     Margin (outside)                |
|  +-------------------------------+  |
|  |  Border                       |  |
|  |  +-------------------------+  |  |
|  |  |  Padding (inside)       |  |  |
|  |  |  +-------------------+  |  |  |
|  |  |  |  Content          |  |  |  |
|  |  |  +-------------------+  |  |  |
|  |  +-------------------------+  |  |
|  +-------------------------------+  |
+-------------------------------------+

Content Area & Width

The width and height properties control content size:

div { width: 300px; }      /* Content width only */
div { height: 200px; }     /* Content height only */
div { box-sizing: border-box; } /* Include border/padding */

Box-sizing modes:

/* Default: width = only content */
box-sizing: content-box;

/* Include padding and border in width */
box-sizing: border-box;

Use box-sizing: border-box; for easier calculations!

Padding (Internal Spacing)

Space inside the box, around content:

padding: 20px;              /* All 4 sides */
padding: 10px 20px;         /* Top/bottom, left/right */
padding: 10px 20px 30px 40px; /* T, R, B, L */
padding-top: 10px;          /* Individual sides */

Visual example:

+-------------------------------+
|      Content (text)           |
|     with 20px padding         |
+-------------------------------+

Margin (External Spacing)

Space outside the box, between elements:

margin: 20px;               /* All 4 sides */
margin: 10px 20px;          /* Top/bottom, left/right */
margin: 10px 20px 30px 40px; /* T, R, B, L */
margin-bottom: 30px;        /* Individual sides */

Key difference from padding: - Padding = inside (pushes content inward) - Margin = outside (pushes other elements away)

Border Styling

The border goes around padding:

border: 2px solid black;           /* Width, style, color */
border: 1px dashed red;            /* Dashed borders */
border-radius: 10px;               /* Rounded corners */
border-top: 3px solid blue;        /* Individual sides */

Border styles:

solid, dashed, dotted, double, groove, ridge, inset, outset

CSS Position Property

Controls how elements are positioned:

static - Default, flows with document

relative - Move relative to original position

absolute - Position relative to parent

fixed - Fixed to viewport (doesn’t scroll)

sticky - Sticks when scrolled past

Position: Static (Default)

Elements follow normal document flow:

div { position: static; } /* Default - no positioning */

/* top, bottom, left, right have NO effect */
div { position: static; top: 20px; } /* Ignored */

Visual:

+-------+
| Box 1 |
+-------+
+-------+
| Box 2 |  <- Normal flow, boxes stack
+-------+

Position: Relative

Move element relative to its normal position:

div {
    position: relative;
    top: 20px;      /* Move down 20px from original */
    left: 10px;     /* Move right 10px from original */
}

Key point: Other elements don’t fill the gap!

Box 1 original position: +-------+
Box 1 after relative:       +-------+  <- Moved, but space remains
+-------+
| Box 2 |  <- Stays in original spot
+-------+

Position: Absolute

Remove from document flow, position relative to parent:

<!-- Parent must have position set -->
<div style="position: relative;">
    <div style="position: absolute; top: 10px; left: 20px;">
        Absolutely positioned
    </div>
</div>

Properties:

top, bottom, left, right /* Distance from parent edges */

Other elements ignore absolute elements (flows under them)

Position: Fixed

Position relative to viewport (doesn’t scroll):

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
}

Perfect for: - Navigation bars that stay at top - Sticky sidebars - “Back to top” buttons

.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Z-Index (Stacking Order)

Control which element appears on top:

.background { z-index: 1; }   /* Below */
.foreground { z-index: 10; }  /* On top */
.modal { z-index: 1000; }     /* Highest */

Visual:

     ^ z-axis (depth)
     |
  10 |     +------------------+
     |     | Foreground      |
   1 | +---+------------------+---+
     | | Background           |
     +---+---------------------+-> x-axis

Higher z-index = appears on top

Display Property Values

Controls how elements are rendered:

display: block;      /* Full width, new line */
display: inline;     /* Only needed width, same line */
display: inline-block; /* Inline but accepts width/height */
display: flex;       /* Flexible box layout */
display: grid;       /* Grid layout */
display: none;       /* Hidden, no space taken */

Layout Example: Navigation & Hero

<nav style="position: fixed; top: 0; z-index: 100;">
    Navigate links here
</nav>

<section class="hero" style="position: relative; margin-top: 60px;">
    <h1>Welcome</h1>
    <button style="position: absolute; bottom: 20px; right: 20px;">
        Scroll Down
    </button>
</section>

Resources & References

Questions?

Next: Lecture 11 - Bootstrap Framework