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 – http://webdesign.about.com/od/examples/l/bl_outline.htm

They did inline styling for the example above, is that a bad thing? Either about.com 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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s