Question 189286 in Html Question posted in
Some basic documentation can be found here.

Html – Why <div>'s doesn't fit properly in the biggest container?

(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.

Tags:

2

Answers


  1. 0

    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. 0

    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