DEV Community

Cover image for Daily Code 60 | Padding, Border, Margin (๐ŸŸฅ HTML & ๐ŸŸฆ CSS Course 3)
Gregor Schafroth
Gregor Schafroth

Posted on

Daily Code 60 | Padding, Border, Margin (๐ŸŸฅ HTML & ๐ŸŸฆ CSS Course 3)

Just continuing with my HTML & CSS course today https://www.youtube.com/watch?v=G3e-cpL7ofc

Letโ€™s go!

My Code

Besides the code, today we looked at the โ€˜inspectโ€™ feature of Google Chrome. Turnโ€™s out itโ€™s more powerful than I knew. I love the โ€˜select element in the page to inspect itโ€™ feature. I already see myself inspecting all kinds of websites going forward ๐Ÿ˜‚

Also we looked at padding, borders, and margin. I knew the basics before, but the most interesting insight I had this time is that if I want to align objects with different or no borders, I need to adjust the padding. In the code below for example SUBSCRIBE has no border and 10px padding. So that means the JOIN button, which has a 1px border, then only needs 9px padding to be aligned. ๐Ÿ’กย - Kind of logical, I just never thought about it.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Subscribe Button</title>
  <style>
    .subscribe-button {
      background-color: rgb(200, 0, 0);
      color: white;
      border: none;
      border-radius: 2px;
      cursor: pointer;
      margin-right: 8px;
      padding: 10px 16px;

      transition: opacity 0.15s;
    }

    .subscribe-button:hover {
      opacity: 0.8;
    }

    .subscribe-button:active {
      opacity: 0.6;
    }

    .join-button {
      background-color: white;
      border: rgb(41, 118, 211);
      border-style: solid;
      border-width: 1px;
      color: rgb(41, 118, 211);
      border-radius: 2px;
      cursor: pointer;
      margin-right: 8px;
      padding: 9px 16px;

      transition: background-color 0.15s, color 0.15s;
    }

    .join-button:hover {
      background-color: rgb(41, 118, 211);
      color: white;
    }

    .join-button:active {
      opacity: 0.7;
    }

    .tweet-button {
      background-color: rgb(6, 155, 224);
      color: white;
      border: none;
      border-radius: 18px;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
      padding: 10px 16px;
      transition: box-shadow 0.15s;
    }

    .tweet-button:hover {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, .15);
    }
  </style>
</head>

<body>
  <button class="subscribe-button">SUBSCRIBE TODAY</button>
  <button class="join-button">JOIN ME NOW</button>
  <button class="tweet-button">Tweet This</button>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Alright thatโ€™s it again for today :)

Top comments (0)