Build Your Own Cheatsheet

Language Help CSS
1

Hey guys! I’ve been struggling with trying to create a box model diagram inside a website for the build your own cheatsheet . I wanted to make a diagram looking similar to this diagram but things aren’t going so well. I am trying to figure out how to make the content only take up the space it needs so the border only has a few pixels of space from the content on all sides if that makes any sense. I have tried things like display : inline-block; but can’t quite figure out how to do it. I think I should be able to go from there after I get past this roadblock though. Anything helps!

HTML

<!DOCTYPE html>
<html>
<head>
  <title>The Box Model Cheatsheet</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <h1>The CSS Box Model</h1>
  </header>
  <main>
    <section id="BoxModel">
      <ul>
        <li><h2>Margin</h2></li>
        <li><h2>Border</h2></li>
        <li><h2>Padding</h2></li>
        <li><h2>Content</h2></li>
      </ul>

    </section>

  </main>
  

</body>
`Preformatted text`

CSS

* {
  background-color: hsl(180, 12%, 17%);
  font-family: 'Roboto';
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  color: hsla(29, 72%, 40%, 0.875);
  margin: 5px 5px 30px 5px;
}

#BoxModel{
  color: hsl(182, 72%, 25%);
}
#BoxModel li{
  list-style: none;
  text-align: center;
  border: solid 2px;
  border-color: hsla(29, 72%, 40%, 0.875);
}
2

I would use a table element instead of a list for borders. It would allow the borders to fit to the content, but you can always add padding to give it space between the content and the borders.

Here would be an example from what you provided:

<table>
        <tr>
          <td>Margin</td>
          <td>Border</td>
          <td>Padding</td>
          <td>Content</td>
        </tr>
 </table>

This would be an example with a vertical table:

<table>
        <tr>
          <td>Margin</td>
        </tr>
        <tr>
          <td>Border</td>
        </tr>
        <tr>
          <td>Padding</td>
        </tr>
        <tr>
          <td>Content</td>
        </tr>
      </table>

Then adding this CSS for border width and color:

 table, th, td {
    border: 2px solid black;
  }

Hope this helps. Happy Coding!

3

Thanks! I will totally try this

4

It worked! Thanks so much man. :facepunch:

1 Like