CSS Box Model
Understanding how CSS margins, padding and borders effect a web page layout will help making good web pages easier. The CSS box model explores how margins, padding and borders effect the size of the container and the surrounding area.
Find out where your website ranks with your chosen keywords in Google, Yahoo and Bing.
14 day free trial. No credit card required.
- Explore the concepts of margins, padding, and borders.
- Style the DIV containers with CSS.
- Add and position a photo using CSS padding, and take a look at what happens to the DIV box dimensions when padding is added.
- Add and position a photo using a CSS border, and take a look at what happens to the DIV box dimensions when a border is added.
- Add a photo and a CSS margin and take a look at what happens to the positioning of both the photo and the DIV box when a margin is added. We will also take a look at how margins affect the dimensions of the DIV box.
- Show how adding a margin to the photo may be a better alternative then adding padding to the DIV box for positioning the photo.
Recommended CSS Courses
The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch is to design AND code a huge project.
Build Responsive Real World Websites with HTML5 and CSS3