How to remove space between content and left border in p tag?

Question

I want to create an element by P tag which must be like this:

I create this by adding top and bottom border to a P tag but there is a little space between the content and left border of P tag: some thing like this:

How can I remove this space and start content just after tag boundry starts?

this is my Code:

     <p style="color:#e72b78; font-weight: bold; border-top:#e72b78 2px solid; border-bottom:#e72b78 2px solid; ">
                        Primary end point:
     </p>

display:table is the one with the more support that keep the block behavior — Temani Afif, Aug 06 '21 at 19:25

Zsolt Balogh · Accepted Answer · 2021-08-06T18:30:51.640

1

Not sure if it fits but just set the width of the p to fit-content.

Edit: Check the browser support for fit-content here: https://caniuse.com/?search=fit-content

p {
color:#e72b78; 
font-weight: bold; 
border-top: currentColor 2px solid; 
border-bottom: currentColor 2px solid;
width: fit-content;
width: -moz-fit-content;

}

<p>
                    Primary end point:
 </p>

Edit: If you want the border to have the color of the font you can use the currentColor variable.

<p style="color:#e72b78; 
    font-weight: bold; 
    border-top: currentColor 2px solid; 
    border-bottom: currentColor 2px solid;
    width: fit-content;
    width: -moz-fit-content;
    ">
                        Primary end point:
     </p>

If you have to support IE11 as well you can set display: inline for the p tag but that may cause some alignment issues what you have to fix as well:

<p style="color:#e72b78; 
    font-weight: bold; 
    border-top: currentColor 2px solid; 
    border-bottom: currentColor 2px solid;
   display: inline;
    ">
                        Primary end point:
     </p>

edited Aug 06 '21 at 18:30

answered Aug 06 '21 at 18:09

Zsolt Balogh

595
1
5
12

dose it works in inline CSS? or it must add to the style tag? – Navid_pdp11 Aug 06 '21 at 18:13
Yes it should work. I added it as inline style. It might happen that some padding is inherited. In that case just add `padding: 0` as well – Zsolt Balogh Aug 06 '21 at 18:16
this does not work for me:( – Navid_pdp11 Aug 06 '21 at 18:17
Can you post the styles which are applied to this `p` tag? – Zsolt Balogh Aug 06 '21 at 18:18
my firefox inspect console shows a warning sign beside the width property with "invalid property value" – Navid_pdp11 Aug 06 '21 at 18:20
it is just like the code you created here. – Navid_pdp11 Aug 06 '21 at 18:21
1

updated it with the FF prefix. Try if it works now – Zsolt Balogh Aug 06 '21 at 18:22
I add -moz prefix and it works – Navid_pdp11 Aug 06 '21 at 18:28
I added one more way to do it in case if you have to support IE11 as well. But I prefer the fit-content. It makes the code cleaner to me... – Zsolt Balogh Aug 06 '21 at 18:32

How to remove space between content and left border in p tag?

1 Answers1