element gets displayed like a box

Question

The <hr> should serve the purpose of simply displaying a line, where, once the HTML is converted to PDF, two people would put their signatures. The Unterschrift Baustellenleiter has the <hr> removed for demonstration purposes here and for me to make sure that the <p> is not messing it up.

My question is, if obviously the <p> element is not to blame, why then would my <hr> element display as a box instead of being displayed as a line?

Screenshot:

enter image description here

The final result should look like this screenshot of a Word file:

enter image description here

<table>
  <tr>
    <td colspan="3">
      <br>
      <hr>
      <p>Ort und Datum </p>
    </td>

    <td colspan="4">
      <p>Unterschrift Baustellenleiter</p>
    </td>

    <td colspan="3">
      <p><br>
        <hr>Unterschrift Monteur
      </p>
    </td>
  </tr>
</table>

Can you confirm whether or not your CSS is affecting the HR element? Use dev tools/inspect to see HR's styles — Joey M, Jun 03 '22 at 12:42
There may be some styling being applied globally to
. Also converting documents to PDF, depending upon the library, can use the technique to DRAW the table like we do in canvas (just to give you an idea). So this can have this behavior. My suggestion would be to use ```border-bottom``` instead of
if styles are allowed. — Arslan Shahab, Jun 03 '22 at 12:50
There is no global styling apart from this, which I cannot imagine to have any effect on the
`* { font-family: Arial, sans-serif; padding: 5px; }` Otherwise, there is no place where I am addressing the
elements. — Sven I., Jun 03 '22 at 13:23
I found out that by removing the padding from the * {} global styling the HR gets displayed properly (finally)! Now the question that remains unanswered is: Why does the padding make the
look like a box? — Sven I., Jun 03 '22 at 13:43
@SvenI. Im guessing the reason is that
creates a border. You can see the same thing happening with:
. If you remove the padding theres just a regular line, but with the padding there is a box. — MF714, Jun 03 '22 at 13:49
1. [A paragraph cannot contain a rule](https://stackoverflow.com/a/23536324/1264804). That's invalid HTML. 2. Instead of a rule, consider using borders or pseudo-elements via CSS. It keeps your markup cleaner. 3. Don't use line breaks for spacing. That's not what they're for. Use margin or padding. 4. I get the impression that you're using this table for layout purposes. That's also [bad practice](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) and a problem for accessibility. There are much better, more modern ways to do layout. — isherwood, Jun 03 '22 at 20:27

K J · Answer 1 · 2022-06-03T20:17:48.243

Like many modern Html objects a Horizontal Rule is considered to have CSS with defaults. Thus to get nearer to what you desire you may need to locally or inline overrule :-) the default settings.

<style>
hr {
    border-color: red;
    border-top-width: 3px;
    border-right-width: 10px;
    border-bottom-width: 3px;
    border-left-width: 10px;
}
</style>
<body>
 <table>

   <td colspan="3">
   <hr><p><hr>Ort und Datum
   </td>

   <td colspan="4">
   <hr><p><hr>Unterschrift Baustellenleiter</p>
   </td>

   <td colspan="3">
   <hr><p><hr>Unterschrift Monteur
   </td>

 </table>

for 2px black use

hr {
    border-color: black;
    border-top-width: 2px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}

element gets displayed like a box

1 Answers1