Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Basic Layout Width and Height Properties

margin and width...

if i change the width to a block element will that effect the margin since it has more space between itself and the parent element?

1 Answer

Hi Jake,

You'll get varying degrees of answers because your question forces us to make a few assumptions about the child or block element you're trying to change and what styling has been applied to the parent element. Still, I want to be helpful. Rather than going through every possible scenario, I highly encourage you to turn this question into an experiment.

You'll need to launch Workspaces and launch a new Workspace. Use a static environment with an HTML boilerplate. Once it's launched open up the index.html file and highlight and replace all of the code in there with the following code and save.

<style>
.parent-container {
   border: 3px solid blue;
   width: 500px;
   height: 500px;
   margin: 0 auto; 
}

.child-container {
    border: 3px solid red;
    width: 400px;
    height: 300px;
    margin: 0 auto;
}

</style>


<div class="parent-container">
    <div class="child-container"></div>
</div>

Preview the code after you save and open up your dev tools on Google Chrome and pay attention to a few things: Screenshot

If screenshot does not load you can access here: Click to see

Play around with the width settings of the child container and you'll be able to answer your question(s) after about 3-5 minutes of playing with different widths.