Home arrow Style Sheets arrow Styling HTML Lists with CSS: Specifying Padding and Margins in Pixels
STYLE SHEETS

Styling HTML Lists with CSS: Specifying Padding and Margins in Pixels


In this second part of a series, you will learn how to assign individual values to the “padding” and “margin” properties of an HTML list. The process is simple to understand; it's very similar to performing the same task with other web page elements.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
August 31, 2010
TABLE OF CONTENTS:
  1. · Styling HTML Lists with CSS: Specifying Padding and Margins in Pixels
  2. · Assigning absolute values to the padding property

print this article
SEARCH DEVARTICLES

Styling HTML Lists with CSS: Specifying Padding and Margins in Pixels
(Page 1 of 2 )

If you’re looking for a guide that shows you how to use the functionality of CSS for polishing the visual presentation of your HTML lists, so that they can be rendered consistently across most modern browsers, then look no further. In the tutorials that make up this article series, you’ll learn not only the basics of this styling process, but how to use your lists to create engaging, yet accessible, user interfaces.

And now that you've been introduced to the series’ main goal, it’s time to review the topics that were covered in its first part. In that installment I start explaining some basic concepts regarding the use of CSS with lists, including how to create an unordered list from scratch and how to reset its default padding and margins.

While this process was extremely simple to master, it revealed a facet of lists that very often is overlooked by inexperienced designers: lists are web page elements that are rather tricky to style, and deserve special attention because they’re used nearly everywhere. However, there’s no reason to feel intimidated, since it’s possible to provide them with a cohesive look by using only a few simple CSS properties.

To demonstrate that my claim is true, in this second chapter of the series I’m going to show how to assign (in pixels) padding and margins to a basic HTML list, so that it can be positioned more precisely on a web page.

Ready to learn the full details of this process? Keep reading!

Review: resetting the padding and margins of an unordered HTML list

Before I explain how to manipulate individually the “padding” and “margin” properties of an HTML list, it’d be useful to take a quick look at the example developed in the previous part of this series, where I discussed how to reset the aforementioned properties in one go.

Having said that, here’s the source code corresponding to this introductory example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample list with padding and margins set to 0</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
p {
    margin: 0 0 10px 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
ul#sample_list {
    padding: 0;
    margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with padding and margins set to 0</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <ul id="sample_list">
            <li><a href="#">List Item 1</a></li>
            <li><a href="#">List Item 2</a></li>
            <li><a href="#">List Item 3</a></li>
            <li><a href="#">List Item 4</a></li>
            <li><a href="#">List Item 5</a></li>
            <li><a href="#">List Item 6</a></li>
            <li><a href="#">List Item 7</a></li>
            <li><a href="#">List Item 8</a></li>
        </ul>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>

As the above example shows, resetting the padding and margins of an HTML list is a straightforward process that can performed in a snap. Despite its simplicity, however, the process provides the target list with a consistent look when displayed on different browsers. This is clearly depicted in the following image:

While the previous code sample is quite useful, in most use cases it’s necessary to assign distinct values to the list’s padding and margins to control its location on the viewport more precisely. Given that, in the following section I’m going to create another basic example, where the sample HTML list that you saw before will be assigned a fixed padding in pixels.

To learn more about this brand new example, jump forward and read the next few lines.   


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials