What does this total width mean actually

Question

I read a book that is called "Bulletproof Web Design" and that is something that I don't really understand. It says "While we have declared a width of 720px for the #nav, to indent the tabs we're also assigning left padding of 46px. Since padding is added to width of the element, the navigation's total width equals 766px."

#nav
{
   float:left;
   width:720;
   margin:0;
   padding:10px 0 0 46px;
   background:#FFCB2D;
}

I mean a width is 720px that is defined in the #nav selector and padding is 46px. I don't know what the book mean with total width. I have never heared that expression before. Is total width a common term that is equal width + padding?

Answer 1

If you look at the graphic below, you'll see that the padding contributes to the total width of the block:

Also, the author is using short-hand notation for the padding, which breaks down to:

top-padding: 10px;
right-padding: 0px;
bottom-padding: 0px;
left-padding: 46px;

The horizontal padding is contributing to the to the total width.