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

HTML

Posted by Brad Woods
Brad Woods
13,772 Points

Element inspection dimensions incorrect?

I have a parent with 2 children. The children are inline-block. I obtained all the measurements of the child elements' content, padding and margins using Chrome's inspector. Adding these measurements together gave me the width of 343px. I set the width of the parent to 343px which should be the value to hold both children. This is not the case though. The 2nd child is moved to the row below the first child as if there isn't enough room in the parent. I expanded the parent's width until I got to a value where the children sit on the same row. This value is 347px.

Does anyone understand what is going on? I use a css reset so any default margin/ padding values are set to zero and if that wasn't working, chrome's inspector would show these values anyway.

Blaize Pennington
Blaize Pennington
13,879 Points

Did you account for any borders? A 1px border in your measurements looks like it would cause these exact numbers, though I'd have to see the code to be able to tell you for sure.

Brad Woods
Brad Woods
13,772 Points

Borders were accounted for as well (sorry I left that out). Chrome's graphical inspector displays that as well.

Blaize Pennington
Blaize Pennington
13,879 Points

Can I get a link to the page? Maybe some fresh eyes may help.

Brad Woods
Brad Woods
13,772 Points

Not sure how to do that. I made it in Treehouse workspaces

Blaize Pennington
Blaize Pennington
13,879 Points

I believe you can just copy and paste the link after you preview the page.

Brad Woods
Brad Woods
13,772 Points

http://web-ftkmxt7ugu.treehouse-app.com/

Tommy Gebru
Tommy Gebru
30,164 Points

Hey Brad,

I am following your discussion and want to help , the link you sent is currently offline/unavailable.

For it to work . We need you to make it visible (launch the page) on your computer open up the preview page and also have workspaces out.

This way Treehouse knows you want to share your work.

Thx

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Brad,

Without seeing your html I would guess that it's the whitespace that you have in your html.

inline and inline-block elements will have a space between them if there is whitespace in the html between these elements.

The 4px discrepancy here is likely the width of a single space based on the font and font-size you currently have.

If you were to float the children instead then they would likely fit.

There's also this css tricks article which has some various methods you can use to get rid of the whitespace between inline elements (including floating instead): http://css-tricks.com/fighting-the-space-between-inline-block-elements/

That article also has an explanation at the beginning of what the problem is.

Brad Woods
Brad Woods
13,772 Points
Brad Woods
Brad Woods
13,772 Points

Jason you were right, it was the white space between the elements in the HTML. I used the methods details on CSS tricks, moving the last '>' of each tag to the following line. Thanks everyone for your help!