Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Margins and padding

From: CSS Fundamentals

Video: Margins and padding

After our overview of the box model, I want to take a moment to familiarize you with the individual properties of the box model, and I want to start with margins and padding. Padding is the space inside of elements that hold the contents of an element away from its edge. You can specify padding in several ways. First, you can define padding individually for each side of an element, and keep in mind, however, that setting padding in only one direction is not the same as setting padding to zero in other directions.

Margins and padding

After our overview of the box model, I want to take a moment to familiarize you with the individual properties of the box model, and I want to start with margins and padding. Padding is the space inside of elements that hold the contents of an element away from its edge. You can specify padding in several ways. First, you can define padding individually for each side of an element, and keep in mind, however, that setting padding in only one direction is not the same as setting padding to zero in other directions.

Any existing padding on other sides is still going to apply. You can also use shorthand notation when defining padding. There are four variations on padding shorthand. First, you can define four separate values, separated by white spaces. Now these values are going to apply in order to the top, right, bottom, and left sides respectively. Now if you use three values, the first value will be applied to top, the second value for the left and right sides, and the last value will be applied to the bottom.

If you only use two values, the first value applies to the top and the bottom, while the second value will apply to both the left and right sides. Finally, if you simply use a single value, that value is going to be used for all sides equally. The rules for padding are actually fairly straightforward, and most elements start with no padding at all. However, when width values are set on an element as well, there are couple of things to keep an eye on. Now by default, most elements that are considered block-level elements, like paragraphs, will go ahead and expand to fit the width of their parents.

If you don't define the width for those elements, padding will be added to the inside of the element, which causes the content area to shrink, and sometimes results in the element actually getting taller. If on the other hand, you specify a width, say 100%, that padding will then result in the element actually becoming wider than its parent element, as the padding is actually added to the outside of an element's width. When defining an element width, it's crucial that you factor the element's padding into the equation. Most designers use padding to keep the contents of a box away from its edge.

This can be used to create visual boxes, like pull quotes out of a single element, without using graphics or background images. Padding can also be used to move the contents of an element away from a background image, to give the appearance of custom bullets, or as a way to add decorative touches to elements. Margins represent the space between the elements and are applied outside of an element's edge. While it's not factored into the total width of an element, it does affect the amount of space that an element takes up on that page and is critical to achieving proper spacing between elements.

Unlike padding, many elements do have a default margin that you need do account for when structuring layouts. Later on, we are going to discuss what a CSS reset is, how they affect margins, and the rationale for using them. Margins also use the same syntax as padding, so you can either specify margins for each side individually or use the shorthand notation. For the most part, margins are pretty straightforward, but there is one aspect of margins that tends to trip up even the most experienced of designers. Unlike horizontal margins, vertical margins collapse. That means that if you have two elements stacked one on top of another, only one of the elements' margins are applied.

Take this example. If you have heading one with a bottom margin of 16 pixels and a paragraph with a top margin is 16 pixels, there were only be 16 pixels' worth of space between them, not 32 pixels. This prevents paragraphs and headings from having double spaces between the two of them. If the values are not the same, the higher of the two values is going to be used. There is a lot more to margin collapse, so as you learn CSS, pay particular attention to when vertical margins collapse, why they collapse, and how you can trigger, or prevent it, based on your needs.

As you can imagine, mastering how margins and padding work is a very important part of learning CSS. They're both incredibly important to properly positioning content and establishing relationships between visual elements. Mastering these properties early on can save you from some frustrating moments down the road.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 68522 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.