Unit 5: Padding vs. Margin
Calling all students!
@flyingCouch @xinmure @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @Forever_D_A @ValKayRee @dumplingbabe @hazelnuttys @panaceia @JJJ000YYY @Nablai @keen @W.L.Ink
I’ve noticed a few of you starting to make your own thread designs around the forums and while I think that’s great, you may have run into a few issues already regarding mobile responsiveness. Don’t worry. I’ll help you all with that problem by the end of this course. It’ll be our 9th unit. (10 units total.)
Anywho, today, I want to spend some time talking about the differences between padding and margin because both are properties that I use a lot when making my own thread designs. To illustrate:
Padding adds space around the content of your span box, so that the words aren’t squished up against the edges of the box. Margin is typically used for positioning the box as a whole because it affects the space outside the box. The following image might make this aspect more clear:
Now, let’s get started with using them in our own code!<span style="font-size:; display: block; border: 2px solid;">Notice how the text touches the border directly? Let's fix that.</span>
Use the above base code if you’d like and add in the padding and margin properties to it. Padding is typically written as padding: 20px; or padding-top: 20px; if you only want it applied to one side. Margin is written in a similar manner; you can use either margin: 10px; or margin-left: 10px; to specify the left side. I recommend messing around with the values to see what happens.
For the assignment this week, please submit code that incorporates both padding and margin. You are welcome to customize other things if you’d like as well. Go ahead. Surprise me. I’ll be waiting. Also, just as a heads-up but next week (September 14th), there will be no new assignment. Consider it as a mid-class break. Unit 6 will be posted on September 21st. I will still grade unit 5 and you’ll hear back from me about it next week Tuesday. Let me know if you have any questions about the course itself.
Direct reply to this message with your submission by September 14th 6pm PDT. Grades will be given shortly. If, at any point during this assignment you wish to ask a question, feel free to tag me and ask!