What does this total width mean actually

css, html

Solution

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.

Problem

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?

Original source

Related problems