Menu
Coddy logo textTech
START LEARNING
flag En iconEnglishdown icon

What is the Box Model?

Part of the Styling with CSS section of Coddy's HTML journey. Lesson 33 of 76.

In CSS, every HTML element is treated as a rectangular box, following the Box Model. This model consists of four main parts:

  1. Content – The actual text, image, or other content inside the box.
  1. Padding – Space between the content and the border. It increases the size of the element but keeps the background color within.
  1. Border – A line that surrounds the padding and content. It can have different styles, colors, and widths.
  1. Margin – Space outside the border that separates the element from other elements.

Understanding the Box Model helps in controlling spacing and layout in web design! 🚀

Try it yourself

This lesson doesn't include a code challenge.

quiz iconTest yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Styling with CSS

1Introduction

What is CSS?CSS SyntaxCSS CommentsThe Head TagThe Title Tag

4Text Fundamentals

Text ColorFont FamilyFont SizeFont WeightText AlignmentText DecorationRecap Challenge #1Recap Challenge #2

7Box Model Part 1

What is the Box Model?PaddingMarginsBordersWidth and HeightRecap Challenge

10Login Form

BodyForm ContainerProject lessonInputProject lessonButtonProject lesson

13Tonga Webpage

Navigation MenuWelcome HeaderProject lessonAbout SectionProject lessonContact SectionProject lessonViewport TagProject lessonMedia QueryProject lesson

2Adding CSS

Inline CSSInternal CSSExternal CSSBasic Styling Challenge

5 Colors and Backgrounds

Background ColorHEX ColorsRGB ColorsTransparency with RGBARecap Challenge #1

8Box Model Part 2

Box SizingBorder RadiusOverflowBox ShadowRecap Challenge

11Layout Techniques

Block vs Inline ElementsPositioning BasicsRelative PositioningAbsolute PositioningFixed PositioningZ-Index BasicsRecap Challenge

14Final Challenges

Arrange ItemsMovies ListWedding Invitation CardFloating Notification

3Basic Selectors

Introduction to SelectorsType SelectorClass SelectorID SelectorGroup SelectorsUniversal SelectorSelection Challenge

6Cafe Menu

Typography BasicsText StylingProject lessonColor and BackgroundsProject lesson

9Flex Box

What is a Flex Box?Flex DirectionJustify ContentAlign ItemsThe Perfect CenterFlex Box Challenge

12Responsive Design Basics

What is Responsive Design?Viewport Meta TagFluid LayoutsViewport UnitsMedia Queries BasicsFlexible Images

Practice on your own: Web playground