Margin, Padding, Border

17 Oct

So my mind was blown when Travis showed me this trick in class this week. 

(Side note: sorry if we already talked about this in class Rob and I missed this).

I was having lots of problems getting my horizontal navigation to match my some sidebar navigation I was building.

Basically the navigation looks the the one we “borrowed” from the W3C:

Screen Shot 2013-10-17 at 12.27.38 AM


I basically wanted my side navigation to look like that, but I couldn’t figure out how to do it. It was looking like this. Screen Shot 2013-10-17 at 12.21.36 AM 

This doesn’t look great. 

BUT in the developer tools in Chrome, you can play around with the margin/border/padding tool. (I know you’ve shown us this in class, Rob). But what I didn’t realize is that you can click on the dash marks or numbers in this image and enter numbers to change the pixel count. My mind was blown. You can see instantly how big things will be and how they will change.

Screen Shot 2013-10-17 at 12.22.59 AM Screen Shot 2013-10-17 at 12.23.06 AM

I was able to use this to hack around with the sizes to fix my navigation.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: