WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
How to reduce the amount of space over words of an image caption (11 posts)

  1. ConsiderThis1
    Member
    Posted 4 months ago #

    I've tried changing all different bits of the CSS related to images, and nothing seems to change the amount of space over the words of a caption. I can't be sure, but I may have inadvertently made my copy appear to close to the images, where they are aligned left. I got a bit confused yesterday... It's harder to see things clearly, due to my brain injury, when I'm stressed. I don't see any change to the amount of space over the words of the captions, though...

    Help?

    http://www.off-grid-insights.com/growing-squash-indoors-with-solatube/

    I asked another question in a new thread, but it went to its death with no replies. I suspect I didn't put it in the right forum, confusion tends to reign... Sadly.

  2. CrouchingBruin
    Member
    Posted 4 months ago #

    Hi, Karen:

    Glad you managed to create a new thread in the right place.

    Just add this CSS rule to the end of various.css:

    .wp-caption-text {
       margin-top: 2px;
    }

    Of course, change the value to whatever you desire. You can also add other properties, like color, if you'd like.

  3. ConsiderThis1
    Member
    Posted 4 months ago #

    Happiness! I saved the email with the link to starting a new thread in this forum. I could not find this forum using the Search function. Sigh.

    Okay... so I made the change, cleared my cache and my page doesn't look any different. This is my Various css

    }
    .credit-link a {
    	color:					#aaaaaa;
    	font-weight:			bold;
    	text-decoration: 		none;
    }
    #main {
       border-left: solid 1px #ccc;
       border-right: solid 1px #ccc;
    }
    .wp-caption-text {
       margin-top: 2px;
    }
  4. ConsiderThis1
    Member
    Posted 4 months ago #

    Oh.. that's weird, the change has suddenly shown up... I'm not sure why id decided to show up now, but I'm glad it did.

    Thank you!!!!

  5. ConsiderThis1
    Member
    Posted 4 months ago #

    Hi CrouchingBruin ~~

    It seems as if the caption is taking the same amount of space because now, while there's only 2 px above the text, there's a lot beneath it, so together it's about the same as before I changed the css... is there a way to reduce the spacing beneath the text, as well?

  6. ConsiderThis1
    Member
    Posted 4 months ago #

    Ah, I'm going to try adding

    margin bottom... this is exciting!

  7. CrouchingBruin
    Member
    Posted 4 months ago #

    Ah, I'm going to try adding margin bottom... this is exciting!

    I see that your brain injury has not interfered with your powers of deduction :). Yes, margin-bottom is what you would use to adjust the space below the caption.

    There are two properties which control spacing: margin & padding. You can think of web elements like little boxes. The picture is inside a box, and the caption is inside another box. You normally can't see the edges of the box unless you set the border property like in your image, but it's there. Margin is the spacing that is between different elements, on the outside of the borders.

    Padding is the space just inside the border of the element, separating the border of the element from the element's contents. If you look at your pictures, there's a little white space between the border and the image itself, because your images have a padding of 7px all around. So if you are trying to adjust spacing, you sometimes have to look at padding as well as margin. In fact, your captions also have 2px of padding on all four sides, so if you want to adjust the spacing of your captions some more, you can add a padding property to your CSS.

  8. ConsiderThis1
    Member
    Posted 4 months ago #

    Hi CrouchingBruin - Ha!. Yes, I can still figure things out, it's just that it now takes ages, where before it was rather a snap.

    margin and padding.

    So, it's padding that makes my header have so much space between the tag line and the menu? I wanted to reduce that once I added so many menu items that the menu's bottom is hidden on smaller computer screens.

    I'll go try adjusting that padding in a bit... Thank you!!!!!

  9. CrouchingBruin
    Member
    Posted 4 months ago #

    So, it's padding that makes my header have so much space between the tag line and the menu?

    No, in this case it's the margin from the tagline container. The current setting is 20px, so if you want to adjust it, use this:

    #tagline {
       margin-bottom: 10px;
    }

    To see if it's the margin or padding that you need to adjust, use a web debugging tool like Firebug Chrome Developer Tools, that's how I do it with your site.

  10. ConsiderThis1
    Member
    Posted 4 months ago #

    Hi CrouchingBruin ~~~ I KNEW there was something I was misunderstanding. I could NOT find a 20px value for any caption. I still have way too much space under the caption on pictures. Sigh. I've tried making it smaller, and I've been careful to clear my cache before I try to see what difference shows up... It's as if the changes I make ... don't exist.

    I feel as if there must be something I'm not understanding.

    I finally see that your most recent reply is in relation to my tagline.

    It made sense that it would be related to my captions, because there's so much extra space. But... no.

    Here's what my css says:

    .wp-caption-text 	{
    	color:					#999999;
    	font-size: 				14px;
    	text-align: 			center;
    	padding: 				2px;
    	margin-bottom:			0; /* this is a p element, turn off its bottom margin */
    }

    That means there's on 2 pixels of space, right? So why does it look like 20???? or, is it my computer making it look like 20, when your computer doesn't....

    http://www.off-grid-insights.com/collards-and-onions/

    I've compared the two pages, and it does seem as if the first page is showing a smaller space below the picture caption.

    Do you think the Collards page has more space because of the spacing between the lines of text. Do you think the spacing between picture and text is affected by the size of the picture? so that sometimes there's additional "margin" because of the relative size of the picture???

    Do you know of a chart that gives picture sizes that will least affect the spacing???? or, am I going at this all wrong and missing an obvious approach????

  11. CrouchingBruin
    Member
    Posted 4 months ago #

    Hi, Karen:

    When you refer to the large amount of space on the Collards page, is it just for the picture with the caption These are the wonderful Collards that fed me all summer and most of the fall. At the back is celery safir.? And are you using Firefox?

    Can you try adding this CSS and see if it helps?

    .wp-caption {
       clear: both;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.