Making a box with a coloured header in HTML and CSS

Question

I am trying to make a box like the following in HTML and CSS:

I have the following code:

orders.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Orders Page</title>
        <link rel="stylesheet" type="text/css" href="orders.css">
    </head>
    <body>
        <div class="order-container">
            <div class="order-header">
                <p>ORDER #10980<p>
            </div>
            <div class="order-list">
            </div>
            <div class="order-footer">
            </div>
        </div>
    </body>
</html>

orders.css:

.order-container {
    border-style: solid;
    height: 400px;
    width: 400px;
}

.order-header {
    text-align: center;
    background-color: #a9dbde;
    height: 60px;
}

I want the blue header to align with the top of the box. However, there is a white space between the blue header and the top of my box, as seen in the following image. I am not sure how to make the top of the header align with the top of the box. Any insights are appreciated.

You need to remove the default margin from the `
` tag. Something like `p{margin:0}` — Raeesh Alam, Mar 15 '20 at 05:53

NinaW · Answer 1 · 2020-03-15T02:56:06.950

Browsers have default styles that you have to override and the browser you are using is adding a margin to p element.

I recommend you use one of the header tags for your element (more semantic).

<h1 class="order-header">ORDER #10980<h1>

And remove margins

.order-header {
    margin: 0;
    ...
}

You can use font-size to adjust text size and line-height to center the text vertically (you can remove height if you do this).

score 1 · Accepted Answer · answered Mar 15 '20 at 02:50

HTML has some default value like @khan said. Also you can try flex property in css, it will help u a lot when doing some element align operation.

<!DOCTYPE html>
<html>
<head>
    <title>Making a box with a coloured header in HTML and CSS</title>
    <style type="text/css">

        .order-container{
            border: 1px solid #999;
            height: 200px;
            width: 300px;
        }
        .order-header{
            text-align: center;
            height: 50px;
            background: #81CCD3;
        }
        .order-header p{
            margin:0 ;
        }

    </style>
</head>
<body>
    <div class="order-container">
        <div class="order-header">
            <p>ORDER #10980</p>
        </div>
        <div class="order-list">
        </div>
        <div class="order-footer">
        </div>
    </div>
</body>
</html>

khan · Answer 3 · 2020-03-15T02:48:41.517

Remove the default margin from the p tag. Here's a list of default values.

p {
  margin: 0;
}

p {
  margin: 0;
}

.order-container {
  border-style: solid;
  height: 400px;
  width: 400px;
}

.order-header {
  text-align: center;
  background-color: #a9dbde;
  height: 60px;
}

<div class="order-container">
  <div class="order-header">
    <p>ORDER #10980
      <p>
  </div>
  <div class="order-list">
  </div>
  <div class="order-footer">
  </div>
</div>

Making a box with a coloured header in HTML and CSS

3 Answers3