Week Two Technical Blog Post

February 15, 2015

Pad My Margins

The first time you try to learn CSS (CSS stands for Cascading Style Sheets), you will hear about many different properties that can be used to change the underlying HTML. From the color of the font all the way to the spacing between lines. In this article I would like to talk about three things that determine the edges of the boxes we are using.

Margins: The term margin is relatively familiar to most people. We see them every day, in the books we read and the websites we visit. In CSS, margins give what we call “white space”; distance between the various elements on the page. This can make things easier to read and also change the way the entire web page is laid out. Margins can be specified for any of the four sides of the box. They are on the outside of the border.

Borders: Borders can be invisible or as wide as the page, they can also be anything in between. Borders encompass every element we have on the page. The border on some boxes my be set to zero pixels (a measurement of screen size) you may not see them but they are always there. Borders separate the edges of the boxes they contain. You can set a specific border to be blue or indigo dotted or dashed thick or thin. There is really no end to the combinations that can be made.

Padding: Padding is the lowest level of space between the contents of a box and it edges. Padding fits in between the border and the contents. Many times when a border has been set around a box filled with text, it is difficult to read as it butts up against the border. Padding gives the ability to create “white space” in between the text and the border.