Difference between revisions of "Help:Wiki University HTML-- Padding"

From FamilySearch Wiki
Jump to navigation Jump to search
m (Created page with "{{HTML School}}{{HTML Tutorial Sidebar}} <div style=" float:right; width:70%; margin-bottom:0px; "> <!--first table links at top of page------------------------------------------...")
 
m
 
(28 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{HTML School}}{{HTML Tutorial Sidebar}}
+
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%">
<div style=" float:right; width:70%; margin-bottom:0px; ">
+
<!--------------row 1-------------------------->
<!--first table links at top of page---------------------------------------------->
+
<!--tool bar--------------------------------------------------->
<table style="width:100%; margin-bottom:-10px; ">
+
{{HTML School}}
<tr><td>
+
<!----------------row 2---------------------------->
<div style="font-size:14pt; font-family:arial;  ">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div>
+
<!-------------------menu-------------------------------->
</td>
+
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{HTML Tutorial Sidebar}}</div>
<td>
+
<!-----------------------main------------------------>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[FamilySearch HTML Div Tag - Introduction|Next Chapter >>]] </div>
+
<!-------------------------------chapters top row---------------------------------->
</td></tr>
+
<div style="grid-column:3/8; padding-left:0.5em">
</table>
+
<!-------------------------------chapters top row---------------------------------->
==Padding==
+
<div style="display:flex; justify-content:space-between; padding:10px; margin-bottom:-1em">
[[File:Padding.png|300px|right]]
+
<div style="font-size:1.3em">[[Help:Wiki University HTML-- Font Bold-Italics|<< Previous Chapter]]</div>
<div style="clear:both; "></div>
+
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML-- Margins|Next Chapter >>]]</span></div>
<p>Consider the paragraph from the previous lesson. </p>  
+
</div>
 +
<div style="margin-left:0.5em">
 +
<!-----------------------main material below this line-------------------------------------------->
 +
==PADDING==
 +
[[File:Borders2.png|300px|right]]
 +
 
 +
<p>Consider the paragraph from the previous lesson and enclose it in a border. </p>  
  
<p style="border:2px solid blue; ">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.</p>
+
<p style="border:2px solid blue; max-width:50% ">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.</p>
 
<p>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.</p>
 
<p>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.</p>
----
+
==PADDING ATTRIBUTE==
 
 
==Padding attribute==
 
 
<p>We use the padding attribute to add a little space between the text and the border:</p>
 
<p>We use the padding attribute to add a little space between the text and the border:</p>
<div style="background-color:wheat; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><nowiki><p style="</nowiki><font color="blue">padding:</font><font color="red">10px</font color>"></div><br>
+
<div style="border:2px solid crimson; background-color:moccasin;  
 +
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"><nowiki><p style="</nowiki><font color="blue">padding:</font><font color="red">10px</font color>"></div><br>
 
*The padding is on all four sides of the paragraph.
 
*The padding is on all four sides of the paragraph.
 
*Padding is called out in pixels.   
 
*Padding is called out in pixels.   
 +
*Any container that has padding added will expand to compensate.
 
<p>Here is our paragraph with 10 pixel padding on all four sides:</p>
 
<p>Here is our paragraph with 10 pixel padding on all four sides:</p>
<p style="border:2px solid blue; padding:10px">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.</p>
+
<p style="border:2px solid blue; padding:10px; max-width:50%">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.</p>
*That looks better.
+
*<font color="blue"><b>NOTICE</b></font color> 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==
+
==LIMIT PADDING==
 
We can limit padding to one or more sides.  To pad only the '''left side''' use:
 
We can limit padding to one or more sides.  To pad only the '''left side''' use:
<div style="background-color:wheat; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> <font color=" blue">padding-left:</font color><font color="red">20px</font color></div><br>
+
<div style="border:2px solid crimson; background-color:moccasin;  
<p style="border:2px solid blue; 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.</p>
+
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"> <p style="<font color=" blue">padding-left:</font color><font color="red">20px</font color></div><br>
 +
<p style="border:2px solid blue; padding-left:20px; max-width:50%">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.</p>
  
 
*<font color="blue"><b>NOTICE</b></font color> padding is only on the left side.
 
*<font color="blue"><b>NOTICE</b></font color> padding is only on the left side.
 
On two sides, you could use:  
 
On two sides, you could use:  
<div style="background-color:wheat; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="blue">padding-right:</font color><font color="red">10px </font color>; <font color="blue">padding-top:</font color><font color="red">10px</font color></div><br>
+
 
 +
<div style="border:2px solid crimson; background-color:moccasin;  
 +
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"><p style="<font color="blue">padding-right:</font color><font color="red">10px</font color>; <font color="blue">padding-top:</font color><font color="red">10px</font color></div><br>
 
The padding attributes for each of the four sides are:
 
The padding attributes for each of the four sides are:
<div style="background-color:wheat; padding:10px; width:100%; font-size:10pt; font-family:Courier New">
+
<div style="border:2px solid crimson; background-color:moccasin;  
 +
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New; margin-bottom:20px">
 
*<font color="blue">padding-top:</font color><font color="red">10px</font color>
 
*<font color="blue">padding-top:</font color><font color="red">10px</font color>
 
*<font color="blue">padding-bottom:</font color><font color="red">10px</font color>
 
*<font color="blue">padding-bottom:</font color><font color="red">10px</font color>
 
*<font color="blue">padding-right:</font color><font color="red">10px</font color>
 
*<font color="blue">padding-right:</font color><font color="red">10px</font color>
*<font color="blue">padding-left:</font color><font color="red">10px</font color></div>
+
*<font color="blue">padding-left:</font color><font color="red">10px</font color>
----
+
</div>
  
==Try these out==
+
==TRY THESE OUT . . . . . ==
 
[[File:Tests.gif|100px|right]]
 
[[File:Tests.gif|100px|right]]
 
<!--Exercises -------------------------------------------------------------->
 
<!--Exercises -------------------------------------------------------------->
Line 51: Line 60:
 
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
 
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
 
<div style="padding-top:12px; padding-left:10px; ">
 
<div style="padding-top:12px; padding-left:10px; ">
1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and padding on the top and bottom of 20 pixels.
+
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. Load our lorem ipsum paragraph twice with no background color and no text color but with a <font color="blue">padding-bottom</font color> of the first paragraph of 100px.  What happens to the space between the paragraphs?
+
2. Copy our lorem ipsum paragraph twice with no background color and no text color but with a <font color="blue">padding-bottom</font color> of the first paragraph of 100px.  What happens to the space between the paragraphs?
 
</div>
 
</div>
 
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">
 
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[FamilySearch Wikitext Tutorial Answers#Padding|Check your answers ]] </div>
+
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[FamilySearch HTML Tutorial Answers#Padding|Check your answers ]] </div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 66: Line 75:
 
<div style="padding-top:12px; padding-left:10px; ">
 
<div style="padding-top:12px; padding-left:10px; ">
 
*To have the text 20px from the left edge of the background what attribute do you use?
 
*To have the text 20px from the left edge of the background what attribute do you use?
::A. padding:20px
+
:A. padding:20px
::B. padding-right:20px
+
:B. padding-right:20px
::C. padding-left:20px
+
:C. padding-left:20px
 
*To have the background 50px from all sides of the text, what attribute do you use?
 
*To have the background 50px from all sides of the text, what attribute do you use?
::A. padding-right:50px
+
:A. padding-right:50px
::B. padding-top:50px
+
:B. padding-top:50px
::C. None of the above
+
:C. None of the above
 
</div>
 
</div>
 
<div style="background-color:lightgray; width:100%; height:35px; padding-top:10px; ">
 
<div style="background-color:lightgray; width:100%; height:35px; padding-top:10px; ">
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[FamilySearch Wikitext Tutorial Answers#Padding|Check your answers ]] </div>
+
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[FamilySearch HTML Tutorial Answers#Padding|Check your answers ]] </div>
 +
</div>
 +
</div>
 +
<!---------------------------------end of material------------------------------------------->
 
</div>
 
</div>
 +
<!-------------------------------chapters bottom---------------------------------------------------->
 +
<div style="clear:both"></div>
 +
<div style="display:flex; justify-content:space-between; padding:10px">
 +
<div style="font-size:1.3em">[[Help:Wiki University HTML-- Font Bold-Italics|<< Previous Chapter]]</div>
 +
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML-- Margins|Next Chapter >>]]</span></div>
 
</div>
 
</div>
 
<!--Links to next and preceding chapters bottom of page ----------------------------->
 
<table style="width:100%; ">
 
<tr><td>
 
<div style="font-size:14pt; font-family:arial;  ">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div>
 
</td>
 
<td>
 
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[FamilySearch HTML Div Tag - Introduction|Next Chapter >>]] </div>
 
</td></tr>
 
</table>
 
 
{{reflist}}
 
{{reflist}}
 
</div>
 
</div>
 
__NOTOC__
 
__NOTOC__
[[Category:Wikitext Lessons]]
+
[[Category:Wiki Lessons]]

Latest revision as of 09:48, 27 February 2018

PADDING[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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 . . . . .[edit | edit source]

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