Help:Wiki University HTML-- Padding

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

PADDING

Borders2.png

Consider the paragraph from the previous lesson and enclose it in a border.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

You can see there is NO space between the text and the border. The text is right up against the border. A little space between the text and the border would probably help it look better.

PADDING ATTRIBUTE

We use the padding attribute to add a little space between the text and the border:

<p style="padding:10px">

  • The padding is on all four sides of the paragraph.
  • Padding is called out in pixels.
  • Any container that has padding added will expand to compensate.

Here is our paragraph with 10 pixel padding on all four sides:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • NOTICE the box expands to compensate for the padding. It does not sideways and the text shrinks to compensate because of the restriction in width but the box does expand both above and below the text.

LIMIT PADDING

We can limit padding to one or more sides. To pad only the left side use:

<p style="padding-left:20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • NOTICE padding is only on the left side.

On two sides, you could use:

<p style="padding-right:10px; padding-top:10px

The padding attributes for each of the four sides are:

  • padding-top:10px
  • padding-bottom:10px
  • padding-right:10px
  • padding-left:10px

TRY THESE OUT . . . . .

Tests.gif
Exercises

1. What is the coding to change the color of the background to light green with blue text and padding on the top and bottom of 20 pixels.

2. Copy our lorem ipsum paragraph twice with no background color and no text color but with a padding-bottom of the first paragraph of 100px. What happens to the space between the paragraphs?


Quick Quiz
  • To have the text 20px from the left edge of the background what attribute do you use?
A. padding:20px
B. padding-right:20px
C. padding-left:20px
  • To have the background 50px from all sides of the text, what attribute do you use?
A. padding-right:50px
B. padding-top:50px
C. None of the above

Navigation menu