From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Box sizing to the rescue

Box sizing to the rescue - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Box sizing to the rescue

“

- [Instructor] Hi, this is Chris Converse, and in this episode, we'll take a look at the Box Sizing property, and how this can make the sizing of elements more predictable in your Web layouts. So if you'd like to follow along, Download the Exercise Files, and let's begin by Opening the HTML file in the Text Editor. And now inside of the HTML file, up in the head area we have a link to style.css, which will open in a moment. Inside of the body area we have an <article> element. Inside of the <article> element, we have an <h1>, and then a <div id="gallery">. Inside of the gallery div, we have a series of anchor links. Each anchor link has an image, and a paragraph element inside. So what we're going to be doing is adding some space in the layout between these individual items, and some space inside, so that the labels don't touch the edges. However, once we start doing things like adding margins and padding, we're going to be changing the size of those elements. So what we want to do is…

Contents