Fixing spacing issues

How would I fix these spacing issues when text is added in?

If you click on one of the links on the page, it’ll open into another window where you’ll be able to see the spacing issue I’m talking about.

These numbers when text is added in should be closer together.

font-size: 22px; Is adding the green background past its borders which shouldn’t be happening. Which is causing it to be uneven when the whole thing is centered in the middle.

Text Added:

90 top

111 Bottom

CSS

.wrap {
  display: table;
  margin: 0 auto;
  background: green;
}

.inner p {
  width: 300px;
  height: 100%;
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}
<div class="wrap">
  <div class="inner">
    <p><span>Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text</span></p>
  </div>
</div>


Text Removed:

157 Top

156 Bottom

Removing the p and the span seems to have fixed it.

.wrap {
  display: table;
  margin: 0 auto;
  background: green;
  margin-top:22px;
}

.inner  {
  width: 300px;
  height: 100%;
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}
<div class="wrap">
  <div class="inner">
    Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text
  </div>
</div>

Did you account for the default top and bottom margins on the p element?

Text content like paragraphs should semantically be in a p element and not just a div.

2 Likes

You mean it would work like this then:

Adding p to both.

.wrap p {
  display: table;
  margin: 0 auto;
  background: green;
  margin-top: 22px;
}

.inner p {
  width: 300px;
  height: 100%;
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}
    <div class="wrap">
      <div class="inner">
        <p><span> 
Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text
     </span></p>
      </div>
    </div>

Which would be better?

Removing p and span

.wrap {
}

.inner  {
}
    <div class="wrap">
      <div class="inner">
        Text, text, text,
      </div>
    </div>

Adding p to both:

.wrap p {
}

.inner p {
}
    <div class="wrap">
      <div class="inner">
        <p><span> 
Text, text, text, Text
     </span></p>
      </div>
    </div>

In your snippet .wrap p and .inner p are the same element so why are you styling them twice? Just use one rule (e.g. .inner p{})

Also why is that span in there as well? It does nothing so remove it.

<div class="wrap">
  <div class="inner">
    <p>Text, text, text, Text</p>
  </div>
</div>

If you are not having more than one paragraph you could lose the .inner div also and just use the p.

<div class="wrap">
    <p class="inner">Text, text, text, Text</p>
</div>

… and if wrap is not doing anything special or holding other content we come down to this only:

<p class="my-content">Text, text, text, Text</p>

1 Like

When this is used, they are not even:
<p class="my-content">Text, text, text, Text</p>

Black Space:

88 Top / 114 Bottom


P on one.

.wrap {
}

.inner p {
}
    <div class="wrap">
      <div class="inner">
        <p>
          Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text
        </p>
      </div>

https://i.imgur.com/FAnsFlP.png

P on both
https://jsfiddle.net/xeqtcp5k/43/

.wrap p{
}

.inner p {
}
    <div class="wrap">
      <div class="inner">
        <p> 
Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text
     </p>
      </div>

https://i.imgur.com/yB63FR8.png

What’s the best way to do it so these stay even top, bottom?

Here they are even at:

Black Space:

103 Top / 103 Bottom

P on both
https://jsfiddle.net/xeqtcp5k/43/

.wrap  p{
  display: table;
  margin: 0 auto;
  background: green;
  margin-top: 22px;
}

.inner p {
  width: 300px;
  height: 100%;
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}

https://i.imgur.com/U5PPXPd.png

What are you defining as ‘these’? What are you seeing as a problem? I’ve read the thread twice and i cant actually identify what you’re trying to do.

1 Like

Configure the text in a way so that it won’t interfere with the overall top and bottom margins.

It works like this, where it’s even, but I was just told not to put p’s on both.

P on both

103 Top / 103 Bottom

.wrap  p{
  display: table;
  margin: 0 auto;
  background: green;
  margin-top: 22px;
}

.inner p {
  width: 300px;
  height: 100%;
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}

‘overall top and bottom margins’… identify which margins you are referring to, because text doesnt change margins.

/47/ makes the red bordered box big because you specified height 100%.
When you specify 100%, the element looks at it’s parent to see if it’s got a height setting. If it doesnt, it looks at its parent’s parent, etc, until it runs into one of two things:
1: a antecedent that has a defined height. At which point it evaluates it’s height as being 100% of that value.
2: failing to encounter one of those, the element takes the value of the window in which it’s operating’s height, and uses that.

Why would you ever specify the height of a <p> element? Maybe you meant to specify min-height to some specific value?

1 Like

The very top and very bottom margins.

They have to be even and not uneven.

As Shown Here:

103 Top / 103 Bottom

Doing this works:

Now it’s even.

103 Top / 103 Bottom

p.my-content {
  margin: 22px 0 0 0;
}

<p class="my-content"> Text, text, text, TextText, text, text, Text Text, text, text, Text Text, text, text, Text</p>

Even
103 Top / 103 Bottom

p.my-content {
  margin: 22px 0 0 0;
}

Even
103 Top / 103 Bottom

p.my-content {
  margin: 22px 0 0;
}

Even
103 Top / 103 Bottom
https://jsfiddle.net/xeqtcp5k/72/

p.my-content {
  margin-top: 22px;
  margin-bottom: 0;
}

What’s the reason why margin-top doesn’t work here, but the other ones do?

Uneven
92 Top / 114 Bottom
https://jsfiddle.net/xeqtcp5k/66/

p.my-content {
  margin-top: 22px;
}

Because margin on this one needs to be specified on the top, and bottom, not just the top.

The safe thing to use here would be this:

103 Top / 103 Bottom

height: 100%; / Deleted
https://jsfiddle.net/xeqtcp5k/75/

p.my-content {
  margin: 22px 0 0 0;
}

Well I have no idea how you measured the bottom margin of 47 to be 114, because it’s not. It’s 5.

the simple answer is that the ‘margin’ (actually the padding) of the bottom-most element on the page is what is adding to the bottom ‘margin’ (term debatable when it’s just the background of the page), which may throw off your perception.

Once again you have omitted to take into account the default margins on the ‘p’ element. I’ll keep saying it until it sinks in :slight_smile:

They are the same p element stop doing that and do this instead:

.wrap  p{
  display: table;
  margin:22px auto 0;
  background: green;
  width: 300px;
  /*height: 100%; remove*/
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}

There is only one p element! inner p and wrap p target the same element. You are just confusing yourself by using a different selector.

No I said don’t use 2 different selectors to target the same element as that is just confusing. The rules still need to all be applied to the p element as I have just shown above (remove the height:100% as that is nonsense).

Html elements like p, h1,h2 etc have default top and bottom margins by default and you need to control these. We have been through this countless times now and is one of the first lessons in CSS.

Margins between elements may also collapse so you need to take this into account where you have nested or adjacent elements with margins.

2 Likes

I think what you are saying is, only 1 div is needed here not 2.

I removed inner from the code.

So, this is all that would be needed then.

.wrap  p{
  display: table;
  margin: 22px auto 0;
  background: green;
  width: 300px;
  /*height: 100%; remove*/
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}

    <div class="wrap">
        <p> 
Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text
     </p>
      </div>

Why do you need the wrap?

Good point.

Further improvement:

p.my-content {
  display: table;
  margin: 22px auto 0;
  background: green;
  width: 300px;
  /*height: 100%; remove*/
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}

    <p class="my-content"> Text, text, text, TextText, text, text, Text Text, text, text, Text Text, text, text, Text</p>

It’s also more usual to declare the basic font-family, font-size and color rules once on the body element, and just override those where required, rather than add those rules to every element which has text.

Default values such as

font-style: normal;

are never needed unless you previously declared a different value which you need to reset.

3 Likes

Here’s further improvement.

Removing the classes sent, input and label.

Using these instead:

label {
  font-size: 22px;
  color: #0059dd;
  font-family: "Times New Roman", Times, serif;
}

input[type=text] {
  font-size: 22px;
  width: 200px;
  color: #0059dd;
  margin-top: 30px;
  background: #000000;
  border: 1px solid #0059dd;
}

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
  cursor: pointer;
  padding-top: 3px;
  background: black;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
}

    <div class="info">
      <label for="input">Text</label>
      <input id="input" type="text" name="someNameHere" placeholder="someValueHere" />
      <input id="sent" type="submit" value="Set" />
    </div>

Is this how I would use span to center the text in the middle?

p.my-content {
  display: table;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

    <p class="my-content"><span>Some random text,Some random text, Some random text, Some random text, </span></p>

It already appears to be centered? The blue text?