How do I make a border size itself depending on what it is called on?

Question

What can I do to make it so that a border is only as wide as the p element it is applied to in CSS?
I also want to make it so that it auto-changes the size of the border if I were to change the text?

This is what it looks like without any fixing: 1

This is what it looks like when I manually change the size and then change the text: 2

I just want it to change depending on the length of the text. Thanks!

display:inline-block to the element? (or display:table or float:left) — Temani Afif, Mar 01 '20 at 21:22

score 0 · Accepted Answer · answered Mar 01 '20 at 21:34

0

Display inline-block will do the trick.

div p{
  border: 1px solid #000;
  display: inline-block;
  padding: 2px 4px;
}

<div>
  <p>Home</p>
<div>

answered Mar 01 '20 at 21:34

Dmytro Cheglakov

744
4
14

How do I make a border size itself depending on what it is called on?

1 Answers1