<commit_before><!doctype html>

<html>
<head>
  <link type="text/css" rel="stylesheet" href="../stylesheets/default.css"/>
  <link type="text/css" rel="stylesheet" href="../stylesheets/blog.css"/>
  <title>Blog IronSight</title>
</head>

<body>
  <nav>
    <a href="index.html">Home</a>
    <a href="../index.html">About</a>
    <a href="git.html">Post 1</a>
  </nav>
  <header>
    <h1>Blog IronSight</h1>
    <img src="imgs/cupertino.jpg" alt="image" />
  </header>
  <main>
    <section>
      <h3>CSS Concepts - Border, Margin, and Padding</h3>
      <p>Time flies, this is already the end of week three for our phase 0 portion at Dev Bootcamp. It also means I have officially moved to New York City for three weeks as of tomorrow. What an amazing three weeks it has been! After two weeks of attempting to master the basic concepts behind html and css, I would like to write up a little bit of what I've learned about basic CSS concepts.</p>

      <img src="imgs/boxdim.png"/>

      <p>One of the more confusing concepts for beginners of CSS is the difference between Border, Margin, and Padding when one tries to implement an element onto a webpage. When I tried to understand the differences between these three properties, I found it extremely helpful to look at the image shown above as it provides a clear visualization of what each of the properties defines on a element, such as an image, on your webpage. To my understanding, border represents the line that separates the inner and the outer part of an element. The space between the border and the other foreign elements on the oter part is represented by margin. So the higher the margin is, the farther apart the element will be from other neighboring elements, or sometimes the actual border on the web browser. On the other hand, the space between the border and the content of the element, such as texts, is represented by padding. The larger the padding is, the smaller the content will appear within the element.</p>

     </section>
   </main>
   <footer>
    <p>(c) 2015 Blog IronSight</p><commit_msg>Edit css blog<commit_after><!doctype html>

<html>
<head>
  <link type="text/css" rel="stylesheet" href="../stylesheets/default.css"/>
  <link type="text/css" rel="stylesheet" href="../stylesheets/blog.css"/>
  <title>Blog IronSight</title>
</head>

<body>
  <nav>
    <a href="index.html">Home</a>
    <a href="../index.html">About</a>
    <a href="git.html">Post 1</a>
  </nav>
  <header>
    <h1>Blog IronSight</h1>
    <img src="imgs/cupertino.jpg" alt="image" />
  </header>
  <main>
    <section>
      <h3>CSS Concepts - Border, Margin, and Padding</h3>
      <p>Time flies, this is already the end of week three for our phase 0 portion at Dev Bootcamp. It also means it has been three weeks since I moved to New York City. After two weeks of attempting to master the basic concepts behind html and css, I would like to write up a little bit of what I've learned about basic CSS concepts.</p>

      <img src="imgs/boxdim.png"/>

      <p>One of the more confusing concepts for beginners of CSS is the difference between Border, Margin, and Padding when one tries to implement an element onto a webpage. When I tried to understand the differences between these three properties, I found it extremely helpful to look at the image shown above as it provides a clear visualization of what each of the properties defines on a element, such as an image, a block of texts, or even a link, on your webpage. I find border to be the clearest to define since it is the line that essentially separates padding and margin. Border separates the inner and outer part of an element, and can be dotted, dashed, or solid.</p>

      <p>Margin is defined as the area around the element, outside of the border. Since margin is not part of the element, it does not have a background color, and is transparent. So the larger a margin is, the farther apart the element is from neighboring elements. Margin can be adjusted using properties margin, which changes all margin on four sides all at once. One can also change the margin on a specific side using margin-left, margin-right, margin-top, or margin-bottom.</p>

     <p> On the other hand, the space between the border and the content of the element, such as texts, is represented by padding. Since padding is an area inside the border, it does get affected by the background color assigned to that element. The larger the padding is, the smaller the content will appear within the element. Similar to margin, padding can  be adjusted using properties padding, which changes all padding on four sides all at once. One can also adjust the padding on a specific side using padding-left, padding-right, padding-top, or padding-bottom.</p>

     </section>
   </main>
   <footer>
    <p>(c) 2015 Blog IronSight</p>
{'fraction_non_alphanumeric': 0.08414507772020725, 'fraction_numerical': 0.004145077720207254, 'mean_word_length': 3.801990049751244, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 79, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2720914', 'n_tokens_mistral': 1321, 'n_tokens_neox': 1270, 'n_words': 700}