Understanding the Box Model part 3

Total Height of an Element



The total height of an element is calculated the same way as the width. 
The example below is the same box from the previous lesson with padding, border and margin.
To summarize, Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Comments

Post a Comment

Popular posts from this blog

font-family part 1

Image
The font-family Property The font-family property specifies the font for an element.  There are two types of font family names:  -  font family : a specific font family (like Times New Roman or Arial) -  generic family : a group of font families with a similar look (like Serif or Monospace) Here is an example of different font styles: The HTML: <p class="serif"> This is a paragraph shown in serif font. </p> <p class="sansserif"> This is a paragraph shown in sans-serif font. </p> <p class="monospace"> This is a paragraph shown in monospace font. </p> <p class="cursive"> This is a paragraph shown in cursive font. </p> <p class="fantasy"> This is a paragraph shown in fantasy font. </p> The CSS: p.serif { font-family: "Times New Roman", Times, serif ; } p.sansserif { font-family: Helvetica, Arial, sans-serif ; } p.monospace { font-family: ...
Read more

Word-spacing part 1

Image
The word-spacing Property The word-spacing property specifies the  space between words  in a text. Just like the letter-spacing property, you can set the word-spacing values as  normal ,  length , and  inherit .  The HTML: <p class="normal">This paragraph has no additional word-spacing applied.</p> <p class="px">This paragraph is word-spaced at 30px.</p> The CSS: p.normal { word-spacing: normal ; } p.px { word-spacing: 30px ; } Try It Yourself Result: When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word spacing, the  normal option is usually used.
Read more

Background attachment part 1

Image
The background-attachment Property The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Even if an element has a scrolling mechanism, a "fixed" background doesn't move with the element. The CSS: body { background-image: url("css_logo.png"); background-repeat: no-repeat; background-attachment: fixed ; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!
Read more