CSS Properties 4 – Box


Box properties are one of the most important things you can learn in CSS. In the same way you probably couldn’t find a website which doesn’t use Text, most of the webmasters out there tend to use Box type of property to adjust positions of their elements. The good news is that there will be nothing fancy today, all properties from this group are very straight forward.

So let’s begin by understanding what is classified as a Box Property?

If you haven’t studied the previous three articles of this series, here are the links:

Tips for Beginners

Box Properties are:

  • Margin
  • Padding
  • Border Width
  • Border Color
  • Border Style
  • Border
  • Width
  • Height
  • Float
  • Clear


<style type="text/css">
h1 {text-align:center; color:#ccc;}
p {color:red; text-decoation:underline;}
<p>This is a test code</p>

So now, without much further ado, letโ€™s begin.



  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin: top right bottom left

Possible values

  • length
  • percentage

You can either adjust individual margins or deal with all of them together in the order described above. Using the complex “margin” property and setting one value will results in all margins having the same value and if you set 2 or 3 values, the unspecified one will take its value from the defined opposite side.

It is possible to use negative values, percentage is determined by the parent element.


h2 {margin: 10px 15px 7px}

Note – in the h2 example, the left margin is not set and therefore it will copy the value of right margin (15 px).



  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding: top right bottom left

Possible values

  • length
  • percentage

While margin deals with the space between the element and “outer space”, padding does a similar thing inside an element – it defines space between border of an element and it’s content. We already explained the difference between margin and padding, refresh your memory in the How to Edit a WordPress Theme series if you need to.

An important, but also a logical thing is that you can’t set negative values of padding, simply because that would cause the element to somehow “crawl out” of its borders – which is of course impossible.

In the same way as margin, you can use one complex command “padding” to set multiple or all of the paddings for a particular element.


.image-cover{padding: 2em 1.5em}

Border Width


  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-width: top right bottom left

Possible values

  • length
  • percentage

Again, as the name suggests, this property deals with borders. You can either set them individually or address all of them by a single property. It is impossible to use negative values (same logic like with padding).


h3 {border-width: 3px 5px}
.h3-indent {border-left-width: 7px}

Border Color



Possible values

  • hexadecimal color value

A very straight forward property determining the color of individual borders (same order applies – top, right, bottom, left).


.image{border-color: #cc0000 #FFFFFF}

Border Style



Possible values

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none

Not only you can influence the color of the border, but also its style – you can choose from a wide variety of various types of borders.


.mydiv{border-style: double dashed} – this would cause double vertical borders and dashed horizontal borders.




Possible values

  • border-width
  • border-style
  • border-color

Provided you don’t need so fancy borders, you can manage all four borders of one element using the complex Border property. There is no way how you could use it to set individual borders though.


.h2-visited {border: 3px thin #cc0000;}




Possible Values

  • length
  • percentage
  • auto

This property is concerned with block level and replaced elements. The “auto” value is usually enough, because it assigns the width based on the content. Only if you use something like Carts or maybe buttons, you might want to give them all the same width.


.cart{width: 90%;}




Possible Values

  • length
  • auto

Nothing much to explain really, there are similar criteria as with the width. On a more notable part, height and width are usually used to modify images.


img.random {width: 60px height 60px;}




Possible Values

  • left
  • right
  • none

I believe Float is well known even for absolute CSS & HTML rookies; it allows you to wrap text around any element of your choice – especially handy with pictures.


.text-indent {float: right;}




Possible Values

  • left
  • right
  • both
  • none

On the other hand, you might want to forbid any floating on the sides of a particular element – that’s where Clear comes in. As you can see, you can deal with either one of the directions or with both of them.


.NoFloat {clear: left;}


If you understand Box Properties, you have almost won the battle already, because you can then arrange and modify the elements as you like and ultimately, create the ultimate website design. We’re nearing the end with the CSS tutorial, two more pieces to go – Classification and Color & Background. Stay tuned, feel free to address me through comments and see you next week!

Thank you for reading!

Thumbnail Courtesy phantompanther-stock

create free website wix below post

Further Related Readings

  1. Carol May 28, 2011 at 5:42 am

    This is a great tutorial – these elements really are the backbone of any good website structure. I’d like to see some inclusion of CSS3 elements, though, like border-radius and box-shadow. These have really opened up a lot of design opportunities when I create my stylesheets.

    1. Ondrej Dyrka May 28, 2011 at 10:32 am

      Hey Carol, I’m glad you like it. Don’t worry, we will examine “more modern” CSS in time as well ๐Ÿ™‚

  2. Constant Strategies (TM) May 30, 2011 at 5:48 pm

    Great article, definitely helpful to those who want to design their own site.

  3. ุชุตู…ูŠู… ู…ูˆุงู‚ุน June 2, 2011 at 3:29 pm

    good article and resource thank you..

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved