Boundaries and Space
Lesson 1 of 1
  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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11
    Review
    Nice work! You’ve learned a lot. Let’s review the web and CSS concepts covered in this lesson.
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo