Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>The Box Model</h1>
<p>The box model refers to how an element is spaced on the page. How much room is around it? Or around its content? This is what the box model is about.</p> 
<p>There are a few different components in the box model, which are shown below. Interact with them to learn more about each one!</p>
<p>To fully interact with the site, you'll need to use Chrome (or Firefox if you enable the dialog element).</p>

<div class="container">
  <div class="margin interactable-container">
    <div class="border interactable-container">
      <div class="padding interactable-container">
        <div class="content interactable-container">
          --- Content ---
        </div>
      </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Lato');

$bg-margin: #e0892c;
$bg-border: #e0b92b;
$bg-padding: #9dd675;
$bg-content: #74bcd6;

@mixin centerElement() {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

* {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}

h1,
p {
  margin: auto;
  padding: 0 20px;
  max-width: 600px;
  width: 100%;
  text-align: center;
}

p {
  margin-top: 40px;
}

pre {
  padding: 10px 0 10px 50px;
  text-align: left;
}

.container {
  margin-top: 50px;
  display: flex;
}

.margin,
.border,
.padding,
.content {
  margin: auto;
  padding: 40px;
  cursor: pointer;
  transition: background-color .3s;
}

.margin {
  background-color: $bg-margin;
  
  &.hovered {
    background-color: darken($bg-margin, 10%);
  }
  
  &::before {
    content: '--- margin ---';
    @include centerElement;
  }
}

.border {
  background-color: $bg-border;

  &.hovered {
    background-color: darken($bg-border, 10%);
  }
  
  &::before {
    content: '--- border ---';
    @include centerElement;
  }
}

.padding {
  background-color: $bg-padding;
  
  &.hovered {
    background-color: darken($bg-padding, 10%);
  }
  
  &::before {
    content: '--- padding ---';
    @include centerElement;
  }
}

.content {
  width: 40vw;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $bg-content;
  
  &.hovered {
    background-color: darken($bg-content, 10%);
  }
}

.dialog-content p {
  margin-top: 15px;
  text-align: left;
}
              
            
!

JS

              
                const marginContainer = document.querySelectorAll('.margin');
const borderContainer = document.querySelectorAll('.border');
const paddingContainer = document.querySelectorAll('.padding');
const contentContainer = document.querySelectorAll('.content');
const interactableContainers = document.querySelectorAll('.interactable-container');

// for all the interactable containers, add event listeners to:
//    reset all interactive containers to not have a hover state:
//    for the imediate hovered element, add a hover state.
interactableContainers.forEach((container, index) => {
  container.addEventListener('mouseover', (event) => {
    resetClasses();
    addHoverClass(event, container);
  });
});

// Listener for removing the hover class on the outermost container
marginContainer[0].addEventListener('mouseout', (event) => {
  resetClasses();
});

// Remove hover class from all containers
function resetClasses() {
  interactableContainers.forEach((container, index) => {
    container.classList.remove('hovered');
  });
}

// Add the hover class to all containers
function addHoverClass(event, container) {
  event.stopPropagation();
  container.classList.add('hovered');
}

/**
 * Dialogr events
 */
dialogr(marginContainer, {
  content: `<h2>Margin</h2>
<p>This is the space around the element, and outside of any defined borders. It can be set with any of the following properties:</p>
<pre>margin: "value";
margin-top: "value";
margin-right: "value";
margin-bottom: "value";
margin-left: "value";</pre>
<p>Here are the values that can be used with margins:</p>
<pre>'auto': let the browser take care of it!
'inherit': get a value from the parent element.
'number': this would be a number in px, inches, a percent, etc.
</pre>
<p>Couple notes. First, negative values work! Second, if you set the width of a container, the margin isn't included in that, so be careful.</p>
<p><a href="https://www.w3schools.com/css/css_margin.asp" target="_blank">Read More</a></p>`
});
dialogr(borderContainer, {
  content: `<h2>Border</h2>
<p>Set a border around an element, with a specific color, size, and type. It can be set either for the entirety of the element, OR for an individual side. Here's how you can set the border (or just an individual aspect of the border:</p>
<pre>
border: 'size' 'type' 'color';
border-width: 'size';
border-style: 'type';
border-color: 'color';
</pre>
<p>It's also possible to set a border radius to give your elements rounded corners! This is done with the 'border-radius' property.</p>
<p><a href="https://www.w3schools.com/css/css_border.asp" target="_blank">Read More</a></p>`
});
dialogr(paddingContainer, {
  content: `<h2>Padding</h2>
<p>This is spacing in between the element's border and its content. The values it accepts are the same as the margin property, accept for 'auto'. That doesn't really work with padding. Here's how to set padding:</p>
<pre>padding: "value";
padding-top: "value";
padding-right: "value";
padding-bottom: "value";
padding-left: "value";</pre>
<p>Quick tip: depending on how your element's <a href="https://www.w3schools.com/cssref/css3_pr_box-sizing.asp" target="_blank">box sizing</a> is set, your padding may or may not be included in the element's width. Also, an elements background extends over it's padding.</p>
<p><a href="https://www.w3schools.com/css/css_padding.asp" target="_blank">Read More</a></p>`
});
dialogr(contentContainer, {
  content: `<h2>Content</h2><p>This is your actual content: any text or child elements. When you set width & height for an element, this is what your setting it for (unless you took a look at that 'box-sizing' property).</p>`
});
              
            
!
999px

Console