CODEWITHSUNDEEP
htmlcssparagraph
Ben
Ben

Reputation: 133

Why is <p> so long when I add an outline?

I'm making a website, and something is quite annoying... here's the code:

.log {
      color: #FF00FC;
      font-family: Josefin Regular;
      font-size: 12.8pt;
      outline: 3.2px solid #ff00fc;
      padding: 6px;
      position: relative;
      top: 400px;
      left: 10px;
      transform: rotate(10deg);
      z-index: 0;
}
<p class='log'>>_</p>

For some reason, this the <p> is so long, it takes up more than the screen. How can I make the outline: smaller to fit my liking? I want it to be much less wide. Thanks, I hope you understand.

Upvotes: 1

Views: 75

Answers (3)

maioman
maioman

Reputation: 18744

By default p element gets displayed as block. If you set display to inline-block it should fix the issue:

.log {
      color: #FF00FC;
      font-family: Josefin Regular;
      font-size: 12.8pt;
      outline: 3.2px solid #ff00fc;
      padding: 6px;
      position: relative;
      top: 400px;
      left: 10px;
      transform: rotate(10deg);
      z-index: 0;
      
      display:inline-block
}
<p class='log'>>_</p>

Upvotes: 7

Patrick Roberts
Patrick Roberts

Reputation: 51886

Change display to inline-block:

.log {
  display: inline-block;
  color: #FF00FC;
  font-family: Josefin Regular;
  font-size: 12.8pt;
  outline: 3.2px solid #ff00fc;
  padding: 6px;
  position: relative;
  top: 400px;
  left: 10px;
  transform: rotate(10deg);
  z-index: 0;
}
<p class='log'>>_</p>

By default, display: block is applied to <p> which causes it to span the entire width of its container when its position is relative or static.

Alternatively, if .log's parent is position: relative, you can change it to position: absolute and you won't need to apply display: inline-block:

body {
  position: relative;
}

.log {
  color: #FF00FC;
  font-family: Josefin Regular;
  font-size: 12.8pt;
  outline: 3.2px solid #ff00fc;
  padding: 6px;
  position: absolute;
  top: 400px;
  left: 10px;
  transform: rotate(10deg);
  z-index: 0;
}
<p class='log'>>_</p>

Upvotes: 5

Joe Lissner
Joe Lissner

Reputation: 2472

The p element is has a display: block; by default, which will take up as much width as is allowed in the flow. By adding display: inline-block; to your .log rule, this should be resolved.

Upvotes: 3

Related Questions