Skip to content

Instantly share code, notes, and snippets.

@dimaanj

dimaanj/box-model.markdown

Created December 25, 2024 08:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dimaanj/48cf56fa4265d695a7259415ce5bf08f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dimaanj/48cf56fa4265d695a7259415ce5bf08f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dimaanj created this gist Dec 25, 2024.
    7 changes: 7 additions & 0 deletions box-model.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Box model
    ---------


    A [Pen](https://codepen.io/Dmitriy_Tomashevich/pen/YPKQJYY) by [Dmitriy](https://codepen.io/Dmitriy_Tomashevich) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/YPKQJYY).
    2 changes: 2 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <div class="box"></div>
    <div class="border-box"></div>
    17 changes: 17 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    .box {
    /* box-sizing: content-box; */
    width: 350px;
    height: 150px;
    margin: 10px;
    padding: 25px;
    border: 5px solid black;
    }

    .border-box {
    box-sizing: border-box;
    width: 350px;
    height: 150px;
    margin: 10px;
    padding: 25px;
    border: 5px solid black;
    }