CODEWITHSUNDEEP
htmlcss
StarSweeper
StarSweeper

Reputation: 417

CSS div border discrepancy

I have a row of horizontal divs. My problem is that the first one has a thicker border than all the others, which now have a small gap between them and the header.

CSS:

.seperate{
    background-image: url("midnight.png");
    background-repeat: repeat-x;
    background-attachment: fixed;
    width: 100px;
}
.container{
    white-space: nowrap;
}
div{
    border: 1px solid black;
    display:inline-block;
    white-space: normal;
    height:600px;
    width: 450px;
    padding: 10px;
    padding-top: 0;
    padding-left: 0;    
    vertical-align: top;
}

HTML: 

<div>
test
</div><!--

--><div class="seperate">
</div>

JSFiddle:

https://jsfiddle.net/hgpkbqg5/1/

What is causing this problem and how can I fix it?

Upvotes: 0

Views: 47

Answers (1)

LIJIN SAMUEL
LIJIN SAMUEL

Reputation: 883

Use,

.seperate{
  background-image: url("midnight.png");
  background-repeat: repeat-x;
  background-attachment: fixed;
  width: 100px;
}
.container{
  white-space: nowrap;
}
.container div{
  border: 1px solid black;
  display:inline-block;
  white-space: normal;
  height:600px;
  width: 450px;
  padding: 10px;
  padding-top: 0;
  padding-left: 0;    
  vertical-align: top;
}

css for div will affects all divs in the page including container

Upvotes: 1

Related Questions