skip to Main Content

(https://phpout.com/wp-content/uploads/2023/06/VY2lw.png)

I am trying to replicate the top-right picture. I added the colors, background colors and solid borders to see the elements properly, so I can set the widths and heights easier by visualizing them.

I tried removing margins and paddings however it doesn’t change the result.

2

Answers


  1. Adding the following to your css should work:

        * {
            box-sizing: border-box;
        }
    

    You can learn more about how border-box works here: https://www.w3schools.com/css/css3_box-sizing.asp

    Also, you can make css a lot easier if you look into learning Flexbox and CSS Grid to build your layouts.

    Login or Signup to reply.
  2. The reason for the confusion of your plan is not using the property of box-sizing and setting the display of card children to the value of inline-block. You can easily reach your goal by using a flex.

    .card {
        display: flex;
        align-items: center;
        padding: 4px;
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search