Margins are awesome

So the whole time I’ve been working on my current site, I’ve been wondering how the heck I was supposed to move my tables and lists to the appropriate spot on screen. Well fortunately today I learned about margins, and although I’m sure there’s another, even better way to do it, I’m happy to finally know how to place things on the page in some way.

The percent value option for the margin property was my biggest help here. I knew I wanted my text blocks and such on the right side of the screen, because I somehow finagled an awesome background picture that decided to have it’s most exciting part on the left hand side. At first I tried using the px option, but realized it’d be very difficult to get it directly in the middle, especially if the browser window changed. Thankfully, setting the margin to 50% did the trick. It looked something like this (only with way more css jammed in).





The end result was that I finally have my first awful website almost done. I’m going to include a screenshot for now, but when I figure a way to host them for free I’ll post them online as well.

snowboard screenshot

Another cool thing I learned today is what a span tag is/does. I had been wondering for a while now, as I used one to do the outline you see in the “This website will…” section above. It seems that span tags are inline elements, meaning it can be used on a line between other elements. Div tags, however, are block elements, and appear on separate lines. This article did the best job of explaining it to me.

Outline properties are confusing

I spent today learning about the Outline property, which was next on the list on w3schools’ website. Oh lordy that was some confusing stuff. First, that wasn’t included in the box model article, yet it is listed in the box model section, so I was unsure if my My (margin) Big (border) Pussy (padding) Comes (content) pneumonic device still applied. Fortunately, outline properties play by their own rules, and I like the device too much to change it now.

My first question is, “What’s the difference between the border and the outline properties?”. Well it turns out that outline properties don’t affect the spacing on the page in any way, they just go around the border of whatever element they’re being applied to. For the box model, you’re supposed to calculate how large it will be and the space it will take up by adding up the parts of the box model (MBPC), but the outline doesn’t apply to it.

(Good time to put that equation for calculating the width of something in here, let’s see if I can do it by memory: total width = width property of content + padding x2 + border x2 + margin x2)

So why use it? Apparently it’s good for showing things that match when searching. By default, the color for the outline is set to invert, which they say inverts it based on the color on the page, but I couldn’t tell what it was inverting. I assumed it was the background color, and I feel like I’m 50% right on that, so I’ll stick this in my pile of things I kind of understand and will hassle the graphic designer at my company about at some point.

One more difference – if you’re using it to highlight some text, it will show an opening at the end and start of lines if it goes over, while border properties will not. This article does a great job showing that –

They did inline styling for the example above, is that a bad thing? Either doesn’t care, or the internet has given inline styling a bad reputation. Maybe there are times when you should use it?

Screen Shot 2014-01-27 at 6.54.46 PM