The CSS Box Model
Learning CSS can be difficult at first, but it helps to understand some basic things about the elements on your pages before you start to style them. Understanding which elements are going to display inline and which will display block is a great first step. After that, it's important to understand that as far as the browser is concerned, every element on your page is a box. Square or rectangle, it's a box.
The browser uses the CSS Box Model to render your elements on the page. It includes the content in the tag, as well as any padding, border, or margin added to that element. The browser and dev tools help you to view the box model for each HTML element on your page, and it looks something like the image below.
Content
The content in your element takes up space on the page. It could be the image file in an image tag, or text in a paragraph. The amount of space the content takes up on the page depends on whether it is inline or block, as well as things like the line height and font size for text elements.
In the Chrome dev tools, the content box is shown in blue. For block elements, notice that the width is the full width of the screen, while inline element content is just as wide as the content itself. When you set a height or width on an element using CSS, those settings apply to the content box.
Content Box Demo
Below, we'll add two elements to the page. One will be an inline element, and one will be a block element. Follow along as we add them to the page, inspect them with the dev tools, then add some styles to them.
The master of science in Graphic Information Technology (GIT) provides students with the opportunity to study within the various areas of graphics and cross-media design.
Padding
Padding serves some important purposes on the web. When you add padding to an element, it will use the background-color of the element you have added it to. This means that for elements like links, padding increases the clickable area of that element, which makes it more accessible on a touch screen.
Padding Box Demo
We are going to style the elements in this section with padding. We'll also see how padding works differently on inline and block elements.
HomeBorder
Not all of the elements on your pages will have a border, but the border is part of the box model. When you add a border to an element on your page, it changes the amount of space that element takes up on the page.
Border Box Demo
The paragraph below has some basic styling already added to it, but those styles are commented out in the CSS file. Follow along as we add those styles individually and see how they change the size and appearance of the element.
The master of science in Graphic Information Technology (GIT) provides students with the opportunity to study within the various areas of graphics and cross-media design.
Margin
Margin is the outermost part of the box model. Adding margin to an element pushes it away from the other elements on the page and it will be the color of the parent container's background.
Margin plays an important role on our pages for centering elements on the page horizontally. Setting the left and right margin on a block element to auto after setting a width on the element that is less than the full page width will center that element on the page.
Margin Box Demo
For the elements below, we're going to add all parts of the box model and see how it changes the way they display on the page.
The degree program has two campus options: ASU Online or Polytechnic campus. It is recommended that applicants inquire about differences in the two campus options prior to application. Applicants choose the campus when completing the online Graduate Admissions Application; the campus cannot be changed once selected.
The M.S. GIT requires a minimum of thirty (30) credit hours in related coursework selected at the direction of a faculty advisor. Students must complete a program of study, or iPOS, with the listed coursework within the first semester of admission.
References
The links below will take you to resources with more information and examples showing the CSS Box Model.
CSS Quick Reference CSS Box Model Box Model on MDN Basic Box Model on MDN