CSS, HTML div height-CodePudding

Each 2 div is of different size and they must be the same height.

CSS:

.bbb {
    width: 333px;
    height: 2px;
    max-height: 2px;
    background: black;
}

HTML:

<div ></div><br><br>
<div ></div><br><br>
<div ></div><br><br>
<div ></div><br><br>
<div ></div>

JSFiddle and IMG

How to fix it?

CodePudding user response：

This is an alternative way. It is working for me now

.bbb {
    width: 333px;
    height: 0px;
    background: transparent;
    border-bottom: 2px solid #000;
    margin-bottom: 30px;
}

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>

CodePudding user response：

I tried your code on the CodePen, it was working fine. However your JSFiddle was also working fine and each of the lines are having the same margin.

Try using a different browser to view your html page and let me know.

Try this code, and let me know how is it working in your system.

.bbb {
    width: 333px;
    height: 2px;
    max-height: 2px;
    background: black;
    margin: 2rem;
}

.bbb:nth-child(1) {
  margin-top: 0rem;
}

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>

Kindly keep me informed about the new issue you are facing right now.

Note - Kindly change the values of margin in class .bbb and also of the margin-top in the .bbb:nth-child(1) according to your convinience.

And sometimes different browsers show a file in different style maybe because of different factors like zoom level etc. Install some other browser like Mozilla Firefox Developer version / Chrome

CodePudding user response：

you can use a :nth-child to change size of div for example width and height of the tag