How to take out the white space in this html

Asked

Viewed 457 times

-2

![Como tirar esse cabeçalho em branco]1

I tried to put height:100% but nothing changed

<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/frontend/ficha_emergencia.css') }}" />
</head>
<body class="body" style="border:0; margin: 6;">
    <table class="onu firstPage" width="100%" height="100%" border="0">
        <tr class="title">
            <td colspan="3">FICHA DE EMERGÊNCIA</td>
        </tr>
        <tr>
            <td width="33%">
                <div class="line">
                    <span class="label">Importador/Expedidor:</span>
                </div>
                <div class="line">
                    <span class="label">Endereço:</span>
                </div>
                <div class="line">
                    <span class="label">Telefone:</span>
                </div>
                <div class="line">
                    <span class="label">Telefone de Emergência:</span>
                 <br></br><br></br>
                 </div>
            </td>

Follows the Css

    body, .body
{
  font-family: Roboto;
  /*padding: 10px;*/
  text-align: justify;
  /*width: 780px;*/
}

.firstPage
{
  border-left: 30px solid red;
  border-right: 30px solid red;
}

td
{
    font-size: 7pt;
    /* vertical-align: top; */
    height: normal;
}

.title
{
  font-size: 8pt;
  text-align: center;
}

.label
{
  font-size: 7pt;
  font-weight: bold;
}

/*td
{

}*/
.border td
{
  height:9pt;
  border-top: 1.4px solid black;
  border-bottom: 1.4px solid black;
}
.borda td
{
  border-top:1.4px solid black;
}

.group
{
  font-size: 9pt;
  text-align: center;
}
html css

  • What space do you refer to?

  • The header the image so does not reveal right, you have to click on it to see,

  • where is the css?

  • Young tries to explain your problem better, even with the picture is not clear to understand what you want

  • There’s a blank spot in the header I can’t get out.

  • In fact I want the html to be without margin against the top, I tried to put margin-top:0px;

  • tries to place an edge on the elements so you can better visualize what is happening. Note: maybe the vertical-align css is the solution

  • you have a style in the body that gives a margin of 6, remove it

  • https://answall.com/questions/275368/por-que-html-body-e-n%C3%A3o-only-body-to-eliminate-the-margins-of-p%C3%A1gina

Show 4 more comments

2 answers

0

I put your same code in a snippet and removed the margin, at first it is without the space above which you mentioned.

body,
.body {
  font-family: Roboto;
  /*padding: 10px;*/
  text-align: justify;
  /*width: 780px;*/
}

.firstPage {
  border-left: 30px solid red;
  border-right: 30px solid red;
}

td {
  font-size: 7pt;
  /* vertical-align: top; */
  height: normal;
}

.title {
  font-size: 8pt;
  text-align: center;
}

.label {
  font-size: 7pt;
  font-weight: bold;
}


/*td
    {

    }*/

.border td {
  height: 9pt;
  border-top: 1.4px solid black;
  border-bottom: 1.4px solid black;
}

.borda td {
  border-top: 1.4px solid black;
}

.group {
  font-size: 9pt;
  text-align: center;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/frontend/ficha_emergencia.css') }}" />
</head>

<body class="body" style="border:0;">
  <table class="onu firstPage" width="100%" height="100%" border="0">
    <tr class="title">
      <td colspan="3">FICHA DE EMERGÊNCIA</td>
    </tr>
    <tr>
      <td width="33%">
        <div class="line">
          <span class="label">Importador/Expedidor:</span>
        </div>
        <div class="line">
          <span class="label">Endereço:</span>
        </div>
        <div class="line">
          <span class="label">Telefone:</span>
        </div>
        <div class="line">
          <span class="label">Telefone de Emergência:</span>
          <br><br><br><br>
        </div>
      </td>
    </tr>

  </table>
</body>

</html>

  • Yeah, it didn’t work here, I’m not sure if it’s a bug

  • you could put the full code in codepen? or on some platform of the kind, so we can analyze it better...

  • How would I do that?

  • post only html and css, use this platform for example, put your code and edit your question by placing the link :D

  • https://codepen.io/JalisDiehl/pen/qJpwZz You can see?

  • @Jalisluciandiehl which browser this space is popping up with?

  • Google Chrome..

Show 2 more comments

-1

change the line:

<body class="body" style="border:0; margin: 6;">

To:

<body class="body" style="border:0; margin: 0;">

  • This margin is horizontal, to move those red edges away from the sides

  • No! border and margin are for horizontal and vertical edges.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.