Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Alita Edmonds
6,068 PointsMargin or Padding?
Hello! My two paragraphs with backgrounds are too squished. How can I make space between them? Would padding or margin do the trick? Thanks for the help!
My code:
HTML <main> <div class="posts"> <section class="stories"> <h1>Hello</h1> <p>Today I went to the park</p> </section> <section class="stories"> <h1>Hello</h1> <p>Today I went to the zoo</p> </section> </div> </main>
CSS .stories {
padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 100px;
background: #f0f1f1;
border-top: 20px solid #c4fffc; border-radius: 10px; box-shadow: 0 5px 1px rgba(0, 0 , 0, .100); }
.stories { display: inline-block; width: 49.5%; box-sizing: border-box; }
.posts { width: 80%; margin: auto; }
1 Answer
Dave StSomeWhere
19,870 PointsCheck out the Box Model
From link above:
The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.
The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height. When the content area has a background, it extends into the padding.
You're probably looking for margin - but consider this a good opportunity to try a bunch of different values just for fun (even just change in using your inspector dev tool in your favorite browser)
