Boundaries and Space
Lesson 1 of 1
  1. 1
    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…
  2. 2
    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, …
  3. 3
    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 …
  4. 4
    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…
  5. 5
    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…
  6. 6
    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…
  7. 7
    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; } **…
  8. 8
    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…
  9. 9
    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….
  10. 10
    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 …
  11. 11
    Nice work! You’ve learned a lot. Let’s review the web and CSS concepts covered in this lesson.

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