CSS: Box Model Basics

Understanding the Box Model is paramount for learning CSS.

The first thing to understand is that every element is represented as a rectangular box. This box consists of four parts: content, padding, borders, and margins.

The content’s area is set by the content’s width and the content’s height. To modify the content area’s size you would use the width, min-width, max-width, height, min-height, and max-height properties. To change its color or add an image to it you can use the background property.

To modify the size of the padding you would have to use the padding property. Padding is shorthand for padding-top, padding-right, padding-bottom, and padding-right. You can use these individually or use the padding shorthand to set them all at once.

To modify the size of the borders you would use the border property. Border is shorthand for border-color, border-style, and border-width. You can also target specific borders by using border-top, border-right, border-bottom, and border-left properties. Borders are similar to content where you can change their color or add an image to them.

To modify the margins you would use the margin property. Margin is shorthand for margin-top, margin-right, margin-bottom, and margin-left. You can use these individually or use the margin shorthand to set them all at once.

It’s important to note here that padding and margins are transparent. Whatever the color of the elements behind them are, will be the color represented when looking at them. While working with CSS remember which one you are using to help you modify the element appropriately.




Software Engineer | Bootcamp Grad

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Handling Short Expiring Time of Authorization Tokens

Lambda function in Python and Scala

The Benefits Of DevOps In Mobile App Development

How To Deal With Burnout as a Software Developer

Woman with head buried in arms

Face Recognition Using ‘face_recognition’ API

The Ultimate Guide To Git: Learn Everything You Need In Less Than 1 Hour | Amir Kamizi

learn git in an hour

6 Best AWS Solution Architect Associate Certification Practice Test, Mock Exams, and Dumps

Bypassing password protection and getting a shell through UART in NEC Aterm WR8165N Wi-Fi router

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Igor Veyner

Igor Veyner

Software Engineer | Bootcamp Grad

More from Medium


Getting started with CSS

A To-do List HTML & CSS (Pt.1)

CSS Basics #2: Some Basics Components