Problems with text boxes

  • AJ Don

    (@cultural-keys)


    9 years, 2 months ago

    I recently implemented a simple code to put a border around text on my home page.

    <div style="border: 1px solid grey; padding: 5px; margin: 5px;">
The text goes here.</div>

    The problem is, none of the boxes are the same!

    https://www.ckmartialhearts.com

    As you can see, the spaces at the tops and bottoms are different for each box. I’m no coder, so i don’t know what’s different between them. But if anyone has any suggestions, it would be appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Howdy @cultural Keys,

    I am a little confused by your question. I am seeing the same amount of padding on the top and bottom of each box starting with “Who can study with us…”

    If it’s easier, could you take a screenshot with the problematic area highlighted to ensure we are on the same page? You can upload screenshots to a service like imgur.com and link it here.

    Thread Starter AJ Don

    (@cultural-keys)

    Hey there Craig. Thanks for the reply. ??

    The screenshot is here;

    https://imgur.com/TqRuAR9

    I corrected most of them, but the bottom one is still wrong. If i ‘Inspect Elements’ for the whole box, the pixel height of the bottom box is much larger than the one above it. As you can see by looking at the top edge of the bottom photo, it’s much closer to the edge of the box than the one above it is.

    Maybe it’s just WordPress, or I’m missing something fundamental (like a Space). Not a big deal, I know. Just…bugs me.

    The last box there is missing 10px of margin because in that box, you have the image and title both contained within the same <p>. In the other boxes, the image and the title are both contained within their own <p> and your CSS is applying a 10px margin to your <p>‘s.

    Simplified version of what is happening (way too many inline styles to copy/paste):

    Top box:

    <p> // this is adding 10px above the title
<img>
</p>
<p>
title
</p>

    Bottom box:

    <p>
<img>
title
</p>

    Hope that helps! I’d also recommend avoiding inline CSS in the future if you can.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problems with text boxes’ is closed to new replies.