Boundaries and Space

Learn how CSS can manage boundaries and space on webpages.

Start

Lesson 1 of 1

1
The Box Model
An important part of styling a webpage with CSS is organizing boundaries and space. Every page element has boundary and space properties that can be controlled using CSS. The CSS box model illu…
Start
2
Create a Border
The border property can be used to visually define a page element’s outer edge. In CSS, the border property’s value requires three parts: 1. thickness: Sets the thickness of the border, …
Start
3
Working with Padding
The CSS padding property controls the empty space between the page element’s content and its border. Increasing a page element’s padding makes the space around the content more spacious, while …
Start
4
Working with Margin
The CSS margin property controls the space between different HTML elements on a webpage. Use margin to bring page elements closer together or to move them further apart. The CSS below ensures 2…
Start
5
More Margins
The margin property creates space on all sides of a page element. It’s also possible to set separate margin spacings on each side of an element. Additional margin properties: 1. margin-top: S…
Start
6
Understanding Display
Using borders, padding, and margins allows us to control boundaries and space for individual HTML elements. But what CSS properties are available to move elements around on the page and create un…
Start
7
Keep It Inline
Display types can be overwritten in CSS by using the display property. For example, we can make list items appear on the same line by setting display to inline: li { display: inline; } **…
Start
8
Using Float
Nice work! The navbar is starting to come together nicely. It would be even better if we could get the Contact button to fill in the empty corner on the bottom right. To achieve this, we can us…
Start
9
Display: Flex
In the web browser, the gallery images that were arranged neatly in rows are now stacked on the left side of the webpage. The CSS display value that arranged the images, flex, has been removed….
Start
10
Working with Position
The CSS position property enables you to position HTML elements in exact locations on a webpage. One useful value for this property is relative. This value positions page elements on a webpage …
Start
11
Review
Nice work! You’ve learned a lot. Let’s review the web and CSS concepts covered in this lesson.
Start