css-margin-border-padding-box

Image Credits: TemplateMonster.com

When it comes to web design/coding there is one thing I constantly find myself dreading, procrastinating against, and otherwise fearing: setting my margins/padding.

Setting margins and padding in web design feels like algebra for me…a foreign concept that I have difficulty grasping. The more I try to understand, read my books, and learn about it, the more confused I become.

I have always been terrible at math and have never been able to understand measurements. I just can’t seem to visualize what 24px looks like around a box on a web page or what a 10px margin looks like.

My textbooks, Karl Stolley’s How to Design and Write Web Pages Today and Ethan Marcotte’s Responsive Web Design explain the concept of padding and margins pretty thoroughly and their light-hearted tone makes reading the text easy, but I still can’t grasp the concepts when I read about them in print. Padding and margins are elements of web design that I need to learn by hands-on trial-and-error experience. In order to understand what 10px or 24px looks like I need to see it in action.

With the padding Tryit Editor on W3Schools I can do just that. I just put in some numbers for the px and it will show me what it looks like as opposed to other settings or no settings at all. I can see this tool as being very helpful to me as I design my website. I think that padding and margins is something I will always struggle with due to math being such a weakness for me, but I think the more I work with web design/coding the better I will be.

Screen shot of the tryit editor for padding offered by w3schools

Advertisements