Learning Your Margins; margin-left & margin-right

simple // ur most basic layout tutorials thread

Quick and easy tutorial. (:
There's not much that you guys need to know bout margins.
And I'm only teaching margin-right & margin-left because those are more commonly used.
Not only that, but margin-top & margin-bottom are very complex and confusing to use.
Heck, I don't even fully understand how to use it yet. -.-"
Also, please excuse the plain formatting in this chapter.
I'm getting wayy too lazy to go into the codes and everything just to beautify it. XD

Vocab can be found in chapter two but I'm going to put it in here anyway.
margin-right - the margin of the right side
margin-left - the margin of the left side

Example: < p style="margin-right: 200px;"/ >< span style="font-family: times new roman; font-size: 12px; color: #ff9ca2;"/ >insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here < /span >< /p >

insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here 

And no. I did not hit enter at the end of those lines. That's because I set the margin of the right side to 200, so it took away 200px from the original margin of the right side on AFF. And if you don't want the margin to continue, go back into the code and end it by putting < /(name of tag that margin is in) >. Usually for me, it'd be < /p > because I usually put the margins into the 'p' tag. Or you could go and find where you want to change it in the code. Then somewhere in a 'span' tag, add in margin-right/left: #px;

Example: < p style="margin-left: 200px;"/ >< span style="font-family: times new roman; font-size: 12px; color: #ff9ca2;"/ >insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here< /span >< /p >

insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here insert text here

Alright then.. I think that's about it to this tutorial. And don't forget that if you copy and paste examples to delete every space AFTER each "<" and every space BEFORE every ">". Also, we're reaching the end of the tutorials on the navigation.. so.. if you have any more questions or any more tutorials to request.. GO DO IT NOW!!

 

Like this story? Give it an Upvote!
Thank you!

Comments

You must be logged in to comment
starfan24
#1
Chapter 13: ⋆。°✩Reader Comment⋆。°✩

Hi author -esque!!

Love this tutorial!! Thank you so much!!

Reader
⋆。°✩starfan24⋆。°✩
Krystal_Luu
#2
Thank you for creating this!!!!
godna24
#3
Chapter 38: hi erm i wanna ask is it possible to use background image instead of background color in the scroll box?
Mael517 #4
Chapter 32: Thank you; this was very helpful!
sikakira
#5
Chapter 18: I wish text shadow worked :((((
Sakarafreak
#6
Chapter 7: Im still confused on the strikethrough..
Dark_History45 #7
Chapter 23: how to change the background image?
Jisoori #8
Chapter 8: why do i have this 'lorem ipsum dolor sit amet' on my preview?