The Box Model
Introducing The Box Model
It is a concept that every single element in the browser is a box. And we can control different properties of the box.
Three main parts
- Margin: the distance from another box.
- Padding: the distance within the box.
- Border: the boundaries of the box.
Working With Borders
Border Color
- We use left, right, top and bottom color separately.
Border-color: red;
Border Width
- It could be 1em, 2px, etc. We use left, right, top and bottom width separately.
Border-width: thick;
Border Style
- It could be dashed, inset, outset, grown, solid, etc. We use left, right, top and bottom style separately.
Border-style: dotted;
Border
- It is shorthand for all others. Color, width, and style.
Border: 3px solid green;
Width, Height, and Percentages
Width:
- To adjust the width of the element.
Width: 500px
Height:
- To adjust the height of the element.
height:430px;
Percentage:
- When we use percent, this change according to parent size
Width: 50%;
Adding Padding to Elements
- The distance of content and the border
- Sequence is top, right, bottom and left. And top, right and left, bottom. And top and bottom, right and left.
Padding: 34px;
The Alternate Box Model
Regular Box Model:
- The changing of height and width it’s mean the changing within the box. Only inner content control by height and width. And if we use,
- With box-sizing set to border-box, the width and height now control the overall dimensions of the entire visible box. If we use this tag, then me add border the border comes within the box and if we don’t add it, then we put border the border come outside the box.
Box-sizing: border-box;
The Display Property
Block | Inline | Inline-Block |
Breaks onto a new line. | Box does not break onto a new line. | Width and height are respected |
Width and height are respected | Width and height do not apply. | Box does not break onto a new line |
Padding, margin and border cause other elements to be pushed away from the box. | Vertical padding, margin, and borders apply but do not cause other inline elements to move away from the box. | Hybrid of inline and block |
The box extends in the inline direction to fill available space in container (unless styled otherwise). | Horizontal padding, margin and border will apply and cause other boxes to move away. | Padding, margin, and border will cause another element to be pushed away from the box |
- Span is inline by default, we add margin, the margin reacts only in left and right. Then we add display property
Display: block;
- It could be block, inline, inline-block, flex, grid, etc.
Display None
- Display none means hides the element.
Display: none;
Negative Margin & Margin Auto
- Negative margin is just opposite site of margin in negative values.
Margin: -34px;
- Margin auto is just taking margin according to size of box. But it’s only in left and right align not top and bottom.
Margin: 0 -auto;
Margin Collapsing WTF
- Margin is collapsing within top and bottom, but not left and right.
A Common Layout Pattern
- If we have three elements, taking margin of same sizes we add a div element and apply margin of 80px then all three elements have same margin at once.
Min and Max Width
If we fix width as:
max-width: 500px;
min-width: 300px;
- Does not shrink larger than 500px and lesser than 300px.
Width: 80px;
- We change the unit because of responsiveness.
Rounding Elements with Border Radius
Border Radius:
- The radius changing of corner of the box.
Border-radius: 20px;
- We also use percentage value. One value is for all, two value one for top and bottom and other is left and right, three values, one for top, second for right and left and third for bottom and four values, for all four sides.
Box Shadows
Box-shadow: 2px 1px 3px blue;
- First for offset-x, second for offset-y, third for blur, and last is color.
Working With Overflow
- If we have height and width with 200px both and font inside larger value then the text is overflow that is why we use
Overflow: scroll;
- There are three values hidden, visible, and scroll. With scroll we scroll within the box and with hidden value the text cut-off where the box ends.
- There is also two direction x and y.
Overflow-x: hidden;
- You don’t scroll in x direction.
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Table of Contents
Interesting Posts
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
More Posts
- 12th AKUEB Handwritten Notes
- 40+ Agency WordPress Template Kits FREE
- 50+ WordPress Template kits Free
- AI is Taking Over Web Design: Will Coders Lose Their Jobs?
- AKUEB 12th Notes
- All BS Department 1st Semester Past-papers
- Artificial Intelligence
- Artist Portfolio HTML CSS Project
- Assembly language Handwritten Notes
- BSCS 1st Semester Notes
- BSCS 2nd Semester Notes
- BSCS 3rd Semester Notes
- BSCS 4th Semester Notes
- BSCS 5th Semester Notes
- BSCS 6th Semester Notes
- BSCS 7th Semester Notes
- BSCS 8th Semester Notes
- Build a Full-Stack App with MERN Stack Pt 1
- Build a Full-Stack App with MERN Stack Pt 2
- Class 10th AKUEB Notes Biology, Physics & Chemistry
- CSS Basics
- CSS Grid vs. Flexbox: When to Use Each
- CSS Selectors
- Dark Mode in Web Development: Best Practices & Implementation
- Data Mining
- Data Structure & Algorithms Notes
- Database Management System Handwritten Notes
- Design and Analysis of Algorithms
- Distributed Database System
- DSA Handwritten Notes
- Hazel CV HTML CSS Project
- How to Build Your First Website from Scratch
- How to Deploy a Website Using GitHub Pages
- How to Use Tailwind CSS for Faster and Cleaner UI Development
- How Web3 is Transforming Web Development
- HTML CSS Landing Page
- HTML Forms
- HTML, CSS, and JS: A Beginner’s Guide to Web Development
- Introduction to HTML
- JavaScript ES6: Features Every Developer Should Know
- More HTML
- No-Code Vs. Traditional Coding: Which is the Future?
- Numerical Computing Handwritten Notes
- Random Color Generator Project
- Specificity and The Cascade
- Styling Text in CSS
- The Box Model
- The Evolution of JavaScript Frameworks: From jQuery to Next.js
- The World of CSS Colors
- Theory of Automata
- Top 10 JavaScript Libraries to Speed Up Development
- Understanding HTTP Status Codes and What They Mean
- Web Design Services Pakistan – Building Digital Brands That Inspire Confidence
- Web Design Trends for 2025: Improve User Experience
- What Is an API? A Simple Guide for Beginners
- Why Businesses Choose WordPress Website Design Pakistan for Online Success
- Wireless Communication Handwritten Notes
4 Responses
I found myself deeply moved by this piece. It’s rare to come across writing that doesn’t just inform but transforms. You’ve taken complex ideas and made them feel not just understandable but important. Reading this, I felt both challenged and comforted — a true testament to the power of your words.