To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Margins

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

Padding.png

  • The next attribute we will describe is margins.
  • Margins are rather like padding only the spacing takes place outside the boundaries not inside the boundaries of the paragraph or div tag.

Let's apply the margin attribute to our two Lorem ipsum paragraphs in the previous chapter and space them 10 pixels[1] apart using div tags:

Here is the Lorem ipsum paragraph without margins:

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.

Here are the paragraphs with background colors with margins applied:

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.
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.
  • Here is the coding for the paragraphs:
<div style="background-color:lightgreen; margin:10px">Lorem ipsum...</div>

<div style="background-color:lightgray; margin:10px">Lorem ipsum...</div>

  • NOTICE that the paragraphs are NOT separated by 20 pixels which is the sum of the 10 plus 10 pixels in the margins. Margins overlap if side by side.
  • NOTICE that the paragraphs are also 10 pixels from both the left and right side of the page.
  • NOTICE the text has changed to compensate for the additional space required on the right and left sides. This is caused by the restriction on width between the left edge and right sidebar (remember we only have 800 pixels).


Limit margins[edit | edit source]

We can limit margins to one or more sides as we can with padding. Here are the margin attributes for each of the four sides:

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

Try these out[edit | edit source]

Tests.gif
Exercises

1. What is the coding to install a background color of light green with white text and a margin on the bottom of 40 pixels our to lorem ipsum paragraph in your sandbox.

2. What is the coding to install a background color of light blue with white text and a margin on the top of 20 pixels to our lorem Ipsum paragraph in your sandbox.


Quick Quiz
  • Margin-top only affects top of paragraph
A. True
B. False
  • Margin-left moves the paragraph to the right of the left side of the page
A. True
B. False
  • Margin-right moves the paragraph to the right of the right side of the page
A. True
B. False
  1. If you are wondering, there are 70 to 75 pixels per inch depending on the browser you are using