The box model determines how the sizing of elements are calculated. Learn about a fix that can be applied to make writing CSS with the box model a little more intuitive.
- [Instructor] In the last exercise, we floated text…around an image element.…If the text was longer than the image,…the remaining text flowed underneath,…but what if you don't want the content…to flow underneath?…To do that, we'll need to create a container…to group the text content as one component,…to the right or the left-hand side.…Before we get into that, let's take another look…at how the box model works.…In the CSS box model relationship,…the width, height, padding, and border…all contribute to the total size of the element.…
Margin adds space around the element,…and while it contributes to how much space…the element takes up, it doesn't actually…affect the size of the element.…For example, if you had an element…set to the width of 400 pixels,…and a height of 200 pixels,…it would take up 400 and 200 pixels…horizontally and vertically.…But if you add padding and a border…the left and right values will be included…in the total width, and the top and bottom values…are now included in the height.…
So, a box that started off with a width of 400…
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property
Skill Level Beginner
1. Getting Started
2. CSS Core
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.