diff --git a/2020-01-10-rsa1.md b/2020-01-10-rsa1.md new file mode 100644 index 0000000..5b65eec --- /dev/null +++ b/2020-01-10-rsa1.md @@ -0,0 +1,14 @@ +--- +author: tait +title: "RSA: what is it?" +layout: post +--- +In this article I will explain what RSA is, and where it is used at a high level. The next parts to this will focus more on what RSA is at a technical level: how it uses numbers to store secrets in the open. Here, I plan to explain simple the idea. + +Let's imagine we have two people. Bob, and Alice. Bob wants to send Alice a love letter. But Eve, the sneaky wreetch, wants to listen in on Alice and Bob's conversation. How can we avoid sending messeges between Alice and Bob like postcards would be sent in the mail: the postman, sorters, and the delivery man can all read it? + +We could, in theory, use a Ceaser Cipher to do this. So Alice can send a messege with a key like A=B, meaning that all A's get converted to B's, B's to C's, C's to D's, et cetera. However, this solution fails when we realize that Bob and Alice would have to agree on some key to make this work. Either A=B, or 1, meaning shift the letters by one character. How can we get them to share this key without meeting in person, where Alice could just tell Bob in person, removing he need for a key. + +Well, what if we used something called asymetric encryption? This would mean we have two keys. A and B, A can decrypt any messeges encrypted with B, and B can decreypy any messeges encrypted with A. But A cannot decrypt its own messeges, and neither can B. You choose one of these keys, it doesn't matter which one, to be your "public key" (although it acts more like a lock), and one to be your private key. The key that you do not share anywhere. You give anyone your lock. You put it on your email signatue, you put it on your blog. You share this! Then anyone who wants to send a secret messege to you can send you a messege and use your public lock (key) to encrypt the messege. + +In this scenario, we could get Alice to have one set of these keys, and Bob to have one set of these keys. They can exchange public keys, allowing Bob to communicate with Alice and vice-versa. Now Alice can send "Bob, I ove you!" over the wire! It will look like "iU0oo--!@EFb` z" or some such other nonesense to anyone else, and Eve especially, listening in. diff --git a/_data/nav.yml b/_data/nav.yml index c1c1486..12055d1 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -2,5 +2,7 @@ link: / - name: Blog link: /blog.html +- name: Podcast + link: /podcast.html - name: Code link: https://github.com/TTWNO/ diff --git a/_posts/2020-01-01-bananas-for-testing.md b/_posts/2020-01-01-bananas-for-testing.md deleted file mode 100644 index 88883c6..0000000 --- a/_posts/2020-01-01-bananas-for-testing.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -layout: post -author: jill -title: (For Testing Purposes) Bananas ---- -A banana is an edible fruit – botanically a berry – produced by several kinds -of large herbaceous flowering plants in the genus Musa. - -In some countries, bananas used for cooking may be called "plantains", -distinguishing them from dessert bananas. The fruit is variable in size, color, -and firmness, but is usually elongated and curved, with soft flesh rich in -starch covered with a rind, which may be green, yellow, red, purple, or brown -when ripe. diff --git a/_posts/2020-01-10-rsa1.md b/_posts/2020-01-10-rsa1.md deleted file mode 100644 index 8202111..0000000 --- a/_posts/2020-01-10-rsa1.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -author: tait -title: "RSA: what is it?" -layout: post ---- -Scary sounding title isn't it? I promise it is not as scary as it sounds. In this article I will explain the basic premis behind RSA encryption, why we need it, how it is vulnerable, and to what extent we can mitigate these vulnerabilities. diff --git a/_posts/2020-01-22-padding-and-margin.md b/_posts/2020-01-22-padding-and-margin.md new file mode 100644 index 0000000..bcfee0c --- /dev/null +++ b/_posts/2020-01-22-padding-and-margin.md @@ -0,0 +1,32 @@ +--- +layout: post +author: tait +title: Padding And Margin +--- +Many people have expressed confusion over how padding and margins work in HTML/CSS. I have been one of those people. In this short article I will explain what the differences are between the two, and how it may affect the functionality of your site. + +Here is an image from the World Wide Web Consortium (W3C) who sets the standards for the web. + +![The W3C standard for padding, margin, borders and width. Width encompases the inner element + padding; the border then encompases it. The margin is the space beyond the border and in between other elements.](/assets/img/w3c-padding-margin.png "W3C border, padding, margin standard.") + +Now although this image shows all the different types of spacing as equal, the majority of the time these will mostly be padding (inner) and margin (outer). Padding is the inner space between the element and its border; margin is the outer space between two different elements. + +Within the margin the user is unable to press any links or execute any javascript code. It is *empty* space. If each `` on your navigation bar has 10 pixels of margin, then there would be 20 pixels in between each `` that would *not* be clickable by the user. + +If you have ``s on your navigation bar with *padding* set to 20 pixels, however, then there will be 20 pixels on each side of the `` text where the user *is* able to click. + +If that part is confusing, try thinking about it in terms of whether `background-color` would apply. + +Attribute | **Padding** | **Margin** +--- | --- | --- +Spacing | within element | between elements +`background-color` applies | Yes | No + + +In summary: +* **Padding**: the space within a tag which is still part of the same tag. `background-color` applies. +* **Margin**: the space in between two seperate tags. `background-color` does not apply; it is empty space. +* **Border**: the space in between the two; it surrounds the padding, but is not the margin. It looks nice somtimes, but it has no non-visual function. `background-color` does not apply. + +I hope this covers the basics of margin and padding! Happy coding! + diff --git a/_sass/main.scss b/_sass/main.scss index 006689a..4aaeea3 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -35,10 +35,10 @@ nav { margin: 0px; } nav > a:first-of-type { - padding-left: 0; + margin-left: 0; } nav > a { - padding: 1em; + margin: 1em; color: $nav-link-color; font-weight: bold; font-family: helvetica, arial, sans-serif; @@ -82,6 +82,35 @@ label { font-size: .8em; } +table, +table tr, +table td, +table th{ + border: 1px solid rgba(0, 0, 0, 0.5); + border-collapse: collapse; + padding: 5px; + font-weight: normal; +} +table { + width: 75%; + margin: auto; +} + +table.post-list, +table.post-list tr, +table.post-list td { + width: 100%; + border: none; + padding-left: 0; +} + +img { + display: block; + width: 55%; + margin-left: auto; + margin-right: auto; +} + @media screen and (max-width: 600px){ body { width: 90%; diff --git a/_site/2020-01-10-rsa1.html b/_site/2020-01-10-rsa1.html new file mode 100644 index 0000000..9116cdf --- /dev/null +++ b/_site/2020-01-10-rsa1.html @@ -0,0 +1,41 @@ + + + + + RSA: what is it? + + + + +
+ + +

RSA: what is it?

+

+ +
+

In this article I will explain what RSA is, and where it is used at a high level. The next parts to this will focus more on what RSA is at a technical level: how it uses numbers to store secrets in the open. Here, I plan to explain simple the idea.

+ +

Let’s imagine we have two people. Bob, and Alice. Bob wants to send Alice a love letter. But Eve, the sneaky wreetch, wants to listen in on Alice and Bob’s conversation. How can we avoid sending messeges between Alice and Bob like postcards would be sent in the mail: the postman, sorters, and the delivery man can all read it?

+ +

We could, in theory, use a Ceaser Cipher to do this. So Alice can send a messege with a key like A=B, meaning that all A’s get converted to B’s, B’s to C’s, C’s to D’s, et cetera. However, this solution fails when we realize that Bob and Alice would have to agree on some key to make this work. Either A=B, or 1, meaning shift the letters by one character. How can we get them to share this key without meeting in person, where Alice could just tell Bob in person, removing he need for a key.

+ +

Well, what if we used something called asymetric encryption? This would mean we have two keys. A and B, A can decrypt any messeges encrypted with B, and B can decreypy any messeges encrypted with A. But A cannot decrypt its own messeges, and neither can B. You choose one of these keys, it doesn’t matter which one, to be your “public key” (although it acts more like a lock), and one to be your private key. The key that you do not share anywhere. You give anyone your lock. You put it on your email signatue, you put it on your blog. You share this! Then anyone who wants to send a secret messege to you can send you a messege and use your public lock (key) to encrypt the messege.

+ +

In this scenario, we could get Alice to have one set of these keys, and Bob to have one set of these keys. They can exchange public keys, allowing Bob to communicate with Alice and vice-versa. Now Alice can send “Bob, I ove you!” over the wire! It will look like “iU0oo–!@EFb` z” or some such other nonesense to anyone else, and Eve especially, listening in.

+ +
+ +
+ + diff --git a/_site/2020/01/01/bananas-for-testing.html b/_site/2020/01/01/bananas-for-testing.html deleted file mode 100644 index a2c4d72..0000000 --- a/_site/2020/01/01/bananas-for-testing.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - (For Testing Purposes) Bananas - - - - -
- - -

(For Testing Purposes) Bananas

-

Wednesday, January 01 2020

- -
-

A banana is an edible fruit – botanically a berry – produced by several kinds -of large herbaceous flowering plants in the genus Musa.

- -

In some countries, bananas used for cooking may be called “plantains”, -distinguishing them from dessert bananas. The fruit is variable in size, color, -and firmness, but is usually elongated and curved, with soft flesh rich in -starch covered with a rind, which may be green, yellow, red, purple, or brown -when ripe.

- -
- -
- - diff --git a/_site/2020/01/10/rsa1.html b/_site/2020/01/10/rsa1.html deleted file mode 100644 index 4f69848..0000000 --- a/_site/2020/01/10/rsa1.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - RSA: what is it? - - - - -
- - -

RSA: what is it?

-

Friday, January 10 2020

- -
-

Scary sounding title isn’t it? I promise it is not as scary as it sounds. In this article I will explain the basic premis behind RSA encryption, why we need it, how it is vulnerable, and to what extent we can mitigate these vulnerabilities.

- -
- -
- - diff --git a/_site/2020/01/22/padding-and-margin.html b/_site/2020/01/22/padding-and-margin.html new file mode 100644 index 0000000..f437f7c --- /dev/null +++ b/_site/2020/01/22/padding-and-margin.html @@ -0,0 +1,77 @@ + + + + + Padding And Margin + + + + +
+ + +

Padding And Margin

+

Wednesday, January 22 2020

+ +
+

Many people have expressed confusion over how padding and margins work in HTML/CSS. I have been one of those people. In this short article I will explain what the differences are between the two, and how it may affect the functionality of your site.

+ +

Here is an image from the World Wide Web Consortium (W3C) who sets the standards for the web.

+ +

The W3C standard for padding, margin, borders and width. Width encompases the inner element + padding; the border then encompases it. The margin is the space beyond the border and in between other elements.

+ +

Now although this image shows all the different types of spacing as equal, the majority of the time these will mostly be padding (inner) and margin (outer). Padding is the inner space between the element and its border; margin is the outer space between two different elements.

+ +

Within the margin the user is unable to press any links or execute any javascript code. It is empty space. If each <link> on your navigation bar has 10 pixels of margin, then there would be 20 pixels in between each <link> that would not be clickable by the user.

+ +

If you have <link>s on your navigation bar with padding set to 20 pixels, however, then there will be 20 pixels on each side of the <link> text where the user is able to click.

+ +

If that part is confusing, try thinking about it in terms of whether background-color would apply.

+ + + + + + + + + + + + + + + + + + + + + +
AttributePaddingMargin
Spacingwithin elementbetween elements
background-color appliesYesNo
+ +

In summary:

+ + +

I hope this covers the basics of margin and padding! Happy coding!

+ + +
+ +
+ + diff --git a/_site/assets/css/style.css b/_site/assets/css/style.css index 493a7c0..b66c4d4 100644 --- a/_site/assets/css/style.css +++ b/_site/assets/css/style.css @@ -12,9 +12,9 @@ a { text-decoration: none; color: #444; } nav { padding: 1em 0px; margin: 0px; } -nav > a:first-of-type { padding-left: 0; } +nav > a:first-of-type { margin-left: 0; } -nav > a { padding: 1em; color: #333; font-weight: bold; font-family: helvetica, arial, sans-serif; } +nav > a { margin: 1em; color: #333; font-weight: bold; font-family: helvetica, arial, sans-serif; } nav > a.on-page { color: #888; } @@ -34,6 +34,14 @@ p.post-excerpt { margin-top: 0; padding-top: 10px; } label { font-style: italic; font-size: .8em; } +table, table tr, table td, table th { border: 1px solid rgba(0, 0, 0, 0.5); border-collapse: collapse; padding: 5px; font-weight: normal; } + +table { width: 75%; margin: auto; } + +table.post-list, table.post-list tr, table.post-list td { width: 100%; border: none; padding-left: 0; } + +img { display: block; width: 55%; margin-left: auto; margin-right: auto; } + @media screen and (max-width: 600px) { body { width: 90%; } #info { margin: 0 7px; } } diff --git a/_site/assets/css/style.css.map b/_site/assets/css/style.css.map index 5cbd9ee..125a108 100644 --- a/_site/assets/css/style.css.map +++ b/_site/assets/css/style.css.map @@ -7,8 +7,8 @@ ], "sourcesContent": [ "@import \"main\";\n", - "$normal-text-color: #111;\n$nav-link-color: #333;\n$nav-link-hover-color: black;\n$link-color: #444;\n$last-p-padd: 1.5em;\n$nav-padd: 1em;\n\nbody {\n background-color: #fefefe;\n padding: 15px;\n margin: auto;\n max-width: 600px;\n}\n#wrapper {\n color: $normal-text-color;\n font-family: arial;\n font-size: 14px;\n}\nh1, h2, h3, h4, h5, h6 {\n font-family: helvetica, arial, sans-serif;\n}\nh1 {\n font-size: 1.5em;\n}\nh2 {\n font-size: 1.3em;\n}\na {\n text-decoration: none;\n color: $link-color;\n}\n\nnav {\n padding: $nav-padd 0px;\n margin: 0px;\n}\nnav > a:first-of-type {\n padding-left: 0;\n}\nnav > a {\n padding: 1em;\n color: $nav-link-color;\n font-weight: bold;\n font-family: helvetica, arial, sans-serif;\n}\nnav > a.on-page {\n color: #888;\n}\nnav > a:hover {\n text-decoration: underline; \n}\n\n#main-img {\n width: 100%;\n}\np {\n padding: .5em 0;\n line-height: 1.4em;\n}\n.line-under {\n padding-bottom: $last-p-padd;\n border-bottom: 1px solid #aaa;\n}\n.article {\n font-family: -apple-system, Helvetica, arial, sans-serif;\n}\n\n.post-date {\n font-family: -apple-system, Helvetica, arial, sans-serif;\n text-transform: uppercase;\n font-weight: bold;\n color: rgba(0, 0, 0, 0.5);\n}\n\np.post-excerpt {\n margin-top: 0;\n padding-top: 10px;\n}\n\nlabel {\n font-style: italic;\n font-size: .8em;\n}\n\n@media screen and (max-width: 600px){\n body {\n width: 90%;\n }\n #info {\n margin: 0 7px;\n }\n}\n\n" + "$normal-text-color: #111;\n$nav-link-color: #333;\n$nav-link-hover-color: black;\n$link-color: #444;\n$last-p-padd: 1.5em;\n$nav-padd: 1em;\n\nbody {\n background-color: #fefefe;\n padding: 15px;\n margin: auto;\n max-width: 600px;\n}\n#wrapper {\n color: $normal-text-color;\n font-family: arial;\n font-size: 14px;\n}\nh1, h2, h3, h4, h5, h6 {\n font-family: helvetica, arial, sans-serif;\n}\nh1 {\n font-size: 1.5em;\n}\nh2 {\n font-size: 1.3em;\n}\na {\n text-decoration: none;\n color: $link-color;\n}\n\nnav {\n padding: $nav-padd 0px;\n margin: 0px;\n}\nnav > a:first-of-type {\n margin-left: 0;\n}\nnav > a {\n margin: 1em;\n color: $nav-link-color;\n font-weight: bold;\n font-family: helvetica, arial, sans-serif;\n}\nnav > a.on-page {\n color: #888;\n}\nnav > a:hover {\n text-decoration: underline; \n}\n\n#main-img {\n width: 100%;\n}\np {\n padding: .5em 0;\n line-height: 1.4em;\n}\n.line-under {\n padding-bottom: $last-p-padd;\n border-bottom: 1px solid #aaa;\n}\n.article {\n font-family: -apple-system, Helvetica, arial, sans-serif;\n}\n\n.post-date {\n font-family: -apple-system, Helvetica, arial, sans-serif;\n text-transform: uppercase;\n font-weight: bold;\n color: rgba(0, 0, 0, 0.5);\n}\n\np.post-excerpt {\n margin-top: 0;\n padding-top: 10px;\n}\n\nlabel {\n font-style: italic;\n font-size: .8em;\n}\n\ntable,\ntable tr,\ntable td,\ntable th{\n border: 1px solid rgba(0, 0, 0, 0.5);\n border-collapse: collapse;\n padding: 5px;\n font-weight: normal;\n}\ntable {\n width: 75%;\n margin: auto;\n}\n\ntable.post-list,\ntable.post-list tr,\ntable.post-list td {\n width: 100%;\n border: none;\n padding-left: 0;\n}\n\nimg {\n display: block;\n width: 55%;\n margin-left: auto;\n margin-right: auto;\n}\n\n@media screen and (max-width: 600px){\n body {\n width: 90%;\n }\n #info {\n margin: 0 7px;\n }\n}\n\n" ], "names": [], - "mappings": "ACOA,AAAA,IAAI,CAAC,EACH,gBAAgB,EAAE,OAAO,EACzB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,GACjB;;AACD,AAAA,QAAQ,CAAC,EACP,KAAK,EAda,IAAI,EAetB,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE,IAAI,GAChB;;AACD,AAAA,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EACrB,WAAW,EAAE,4BAA4B,GAC1C;;AACD,AAAA,EAAE,CAAC,EACD,SAAS,EAAE,KAAK,GACjB;;AACD,AAAA,EAAE,CAAC,EACD,SAAS,EAAE,KAAK,GACjB;;AACD,AAAA,CAAC,CAAC,EACA,eAAe,EAAE,IAAI,EACrB,KAAK,EA1BM,IAAI,GA2BhB;;AAED,AAAA,GAAG,CAAC,EACF,OAAO,EA5BE,GAAG,CA4BO,GAAG,EACtB,MAAM,EAAE,GAAG,GACZ;;AACD,AAAA,GAAG,GAAG,CAAC,AAAA,cAAc,CAAC,EACpB,YAAY,EAAE,CAAC,GAChB;;AACD,AAAA,GAAG,GAAG,CAAC,CAAC,EACN,OAAO,EAAE,GAAG,EACZ,KAAK,EAxCU,IAAI,EAyCnB,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,4BAA4B,GAC1C;;AACD,AAAA,GAAG,GAAG,CAAC,AAAA,QAAQ,CAAC,EACd,KAAK,EAAE,IAAI,GACZ;;AACD,AAAA,GAAG,GAAG,CAAC,AAAA,MAAM,CAAC,EACZ,eAAe,EAAE,SAAS,GAC3B;;AAED,AAAA,SAAS,CAAC,EACR,KAAK,EAAE,IAAI,GACZ;;AACD,AAAA,CAAC,CAAC,EACA,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,KAAK,GACnB;;AACD,AAAA,WAAW,CAAC,EACV,cAAc,EAxDF,KAAK,EAyDjB,aAAa,EAAE,cAAc,GAC9B;;AACD,AAAA,QAAQ,CAAC,EACP,WAAW,EAAE,2CAA2C,GACzD;;AAED,AAAA,UAAU,CAAC,EACT,WAAW,EAAE,2CAA2C,EACxD,cAAc,EAAE,SAAS,EACzB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,kBAAkB,GAC1B;;AAED,AAAA,CAAC,AAAA,aAAa,CAAC,EACb,UAAU,EAAE,CAAC,EACb,WAAW,EAAE,IAAI,GAClB;;AAED,AAAA,KAAK,CAAC,EACJ,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,IAAI,GAChB;;AAED,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK,IACjC,AAAA,IAAI,CAAC,EACH,KAAK,EAAE,GAAG,GACX;EACD,AAAA,KAAK,CAAC,EACJ,MAAM,EAAE,KAAK,GACd" + "mappings": "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" } \ No newline at end of file diff --git a/_site/assets/img/w3c-padding-margin.png b/_site/assets/img/w3c-padding-margin.png new file mode 100644 index 0000000..956a4f1 Binary files /dev/null and b/_site/assets/img/w3c-padding-margin.png differ diff --git a/_site/blog.html b/_site/blog.html index 210dbf4..3e54c4e 100644 --- a/_site/blog.html +++ b/_site/blog.html @@ -14,27 +14,19 @@ Blog + Podcast + Code - - - - - +
-

RSA: what is it?

- 10 January 2020 -

Scary sounding title isn’t it? I promise it is not as scary as it sounds. In this article I will explain the basic premis behind RSA encryption, why we need it, how it is vulnerable, and to what extent we can mitigate these vulnerabilities.

-
-
diff --git a/_site/feed.xml b/_site/feed.xml index bcfb5f1..0ae04c8 100644 --- a/_site/feed.xml +++ b/_site/feed.xml @@ -1,8 +1,44 @@ -Jekyll2020-01-21T17:25:20+00:00http://localhost:4000/feed.xmlRSA: what is it?2020-01-10T00:00:00+00:002020-01-10T00:00:00+00:00http://localhost:4000/2020/01/10/rsa1<p>Scary sounding title isn’t it? I promise it is not as scary as it sounds. In this article I will explain the basic premis behind RSA encryption, why we need it, how it is vulnerable, and to what extent we can mitigate these vulnerabilities.</p>taitScary sounding title isn’t it? I promise it is not as scary as it sounds. In this article I will explain the basic premis behind RSA encryption, why we need it, how it is vulnerable, and to what extent we can mitigate these vulnerabilities.(For Testing Purposes) Bananas2020-01-01T00:00:00+00:002020-01-01T00:00:00+00:00http://localhost:4000/2020/01/01/bananas-for-testing<p>A banana is an edible fruit – botanically a berry – produced by several kinds -of large herbaceous flowering plants in the genus Musa.</p> - -<p>In some countries, bananas used for cooking may be called “plantains”, -distinguishing them from dessert bananas. The fruit is variable in size, color, -and firmness, but is usually elongated and curved, with soft flesh rich in -starch covered with a rind, which may be green, yellow, red, purple, or brown -when ripe.</p>jillA banana is an edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa. \ No newline at end of file +Jekyll2020-01-23T03:10:24+00:00http://localhost:4000/feed.xmlPadding And Margin2020-01-22T00:00:00+00:002020-01-22T00:00:00+00:00http://localhost:4000/2020/01/22/padding-and-margin<p>Many people have expressed confusion over how padding and margins work in HTML/CSS. I have been one of those people. In this short article I will explain what the differences are between the two, and how it may affect the functionality of your site.</p> + +<p>Here is an image from the World Wide Web Consortium (W3C) who sets the standards for the web.</p> + +<p><img src="/assets/img/w3c-padding-margin.png" alt="The W3C standard for padding, margin, borders and width. Width encompases the inner element + padding; the border then encompases it. The margin is the space beyond the border and in between other elements." title="W3C border, padding, margin standard." /></p> + +<p>Now although this image shows all the different types of spacing as equal, the majority of the time these will mostly be padding (inner) and margin (outer). Padding is the inner space between the element and its border; margin is the outer space between two different elements.</p> + +<p>Within the margin the user is unable to press any links or execute any javascript code. It is <em>empty</em> space. If each <code class="highlighter-rouge">&lt;link&gt;</code> on your navigation bar has 10 pixels of margin, then there would be 20 pixels in between each <code class="highlighter-rouge">&lt;link&gt;</code> that would <em>not</em> be clickable by the user.</p> + +<p>If you have <code class="highlighter-rouge">&lt;link&gt;</code>s on your navigation bar with <em>padding</em> set to 20 pixels, however, then there will be 20 pixels on each side of the <code class="highlighter-rouge">&lt;link&gt;</code> text where the user <em>is</em> able to click.</p> + +<p>If that part is confusing, try thinking about it in terms of whether <code class="highlighter-rouge">background-color</code> would apply.</p> + +<table> + <thead> + <tr> + <th>Attribute</th> + <th><strong>Padding</strong></th> + <th><strong>Margin</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>Spacing</td> + <td>within element</td> + <td>between elements</td> + </tr> + <tr> + <td><code class="highlighter-rouge">background-color</code> applies</td> + <td>Yes</td> + <td>No</td> + </tr> + </tbody> +</table> + +<p>In summary:</p> +<ul> + <li><strong>Padding</strong>: the space within a tag which is still part of the same tag. <code class="highlighter-rouge">background-color</code> applies.</li> + <li><strong>Margin</strong>: the space in between two seperate tags. <code class="highlighter-rouge">background-color</code> does not apply; it is empty space.</li> + <li><strong>Border</strong>: the space in between the two; it surrounds the padding, but is not the margin. It looks nice somtimes, but it has no non-visual function. <code class="highlighter-rouge">background-color</code> does not apply.</li> +</ul> + +<p>I hope this covers the basics of margin and padding! Happy coding!</p>taitMany people have expressed confusion over how padding and margins work in HTML/CSS. I have been one of those people. In this short article I will explain what the differences are between the two, and how it may affect the functionality of your site. \ No newline at end of file diff --git a/_site/index.html b/_site/index.html index e1039c0..545aff1 100644 --- a/_site/index.html +++ b/_site/index.html @@ -17,7 +17,7 @@
Southern Alberta Insitute of Technology (SAIT)
- Information Technology - Software Development major + School of Information and Communication Technologies
tait.hoyem@edu.sait.ca
@@ -32,6 +32,8 @@ Blog + Podcast + Code diff --git a/_site/podcast.html b/_site/podcast.html new file mode 100644 index 0000000..f2e2d4d --- /dev/null +++ b/_site/podcast.html @@ -0,0 +1,27 @@ + + + + + + + + + +
+ + +

This is not ready yet. Come back February 2020.

+ +
+ + diff --git a/_site/sitemap.xml b/_site/sitemap.xml index c41b655..193d74a 100644 --- a/_site/sitemap.xml +++ b/_site/sitemap.xml @@ -1,12 +1,11 @@ -http://localhost:4000/2020/01/01/bananas-for-testing.html -2020-01-01T00:00:00+00:00 +http://localhost:4000/2020/01/22/padding-and-margin.html +2020-01-22T00:00:00+00:00 -http://localhost:4000/2020/01/10/rsa1.html -2020-01-10T00:00:00+00:00 +http://localhost:4000/2020-01-10-rsa1.html http://localhost:4000/blog.html @@ -14,4 +13,7 @@ http://localhost:4000/ + +http://localhost:4000/podcast.html + diff --git a/assets/img/w3c-padding-margin.png b/assets/img/w3c-padding-margin.png new file mode 100644 index 0000000..956a4f1 Binary files /dev/null and b/assets/img/w3c-padding-margin.png differ diff --git a/blog.html b/blog.html index 96650f2..52b1560 100644 --- a/blog.html +++ b/blog.html @@ -2,8 +2,7 @@ layout: default title: Blog --- - -
-

(For Testing Purposes) Bananas

- 01 January 2020 -

A banana is an edible fruit – botanically a berry – produced by several kinds -of large herbaceous flowering plants in the genus Musa.

+

Padding And Margin

+ 22 January 2020 +

Many people have expressed confusion over how padding and margins work in HTML/CSS. I have been one of those people. In this short article I will explain what the differences are between the two, and how it may affect the functionality of your site.
+
{% for post in site.posts %}
diff --git a/index.html b/index.html index 3b1f887..a760bd2 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ layout: home
Southern Alberta Insitute of Technology (SAIT)
- Information Technology - Software Development major + School of Information and Communication Technologies
tait.hoyem@edu.sait.ca
diff --git a/podcast.html b/podcast.html new file mode 100644 index 0000000..ad91234 --- /dev/null +++ b/podcast.html @@ -0,0 +1,5 @@ +--- +layout: default +--- + +

This is not ready yet. Come back February 2020.