• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 3. Creating a Web Page Layout wi... > Custom padding and margins

Custom padding and margins

In CSS, you can set custom padding and margins. With plain HTML, you can set a padding value, but it's the same on all four sides. Same goes for margins. With CSS, you can set top, right, bottom, and left independently — you can have four completely different values! The flexibility this allows is a tremendous help to designers and makes spacer graphics a thing of the past. The old, spacer graphic technique was to use transparent .gif files or nested tables with tiny spacer cells in them to try to get nice layouts. These techniques create very messy, hard‐to‐maintain code. And it's a nightmare for anyone trying to visit your Web site with devices other than browsers. (Screen readers for blind users become confused in the sea of weird table structures and unnecessary .gif files.)

Figure 3-5 shows the CSS box model, which is the way that browsers and other devices actually see your content. Padding settings affect the space between the content and the “box” that contains it. Margin settings affect the actual space around the content. For more on padding and margins and how to use them effectively, visit the W3Schools CSS tutorials and reference at www.w3schools.com/css.

Figure 3-5: The box model showing padding and margins.



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint