CODEWITHSUNDEEP
htmlcss
ChrisWilson
ChrisWilson

Reputation: 459

Header not flush with top of webpage.

.header {
  height: 115px;
  width: 100%;
  background-color: #33CC66;
  text-align: center;
  margin:0cm;
  padding:0cm;
}
.headertext {
  font-size: 250%;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}
.outerdiv{
  padding:0cm;
  margin:0cm;
}

HTML 

 <div className="outerdiv">
    <div className="header">
      <p className="headertext">
        Add New Habit
        <span className="glyphicon glyphicon-plus"></span>
      </p>
    </div>
    <div className="pics">
      {this.renderHabits().map((habitObject)=>{
        return <img src={habitObject.imageLink} height="460" width="490"/>
     })}
   </div>
 </div>

So I've tried playing with the padding and margin even making them negative but the header still has space between it and the top. Thoughts?

Upvotes: 0

Views: 149

Answers (2)

Adnan Akram
Adnan Akram

Reputation: 641

Maybe it's because of <p> but not so sure, if you can post here working code it will be better for us to understand.

<p> tag have a default margin that's why.

Upvotes: 1

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

try reseting body margin/padding to zero

Upvotes: 0

Related Questions