WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] h6 Spacing Help in page (5 posts)

  1. xfourninetwox
    Member
    Posted 1 year ago #

    Hey folks.

    I was trying to find a way to provide bold links for one of my pages that would be easily updated and decided that since the h6 tag wasn't being used by my wordpress page in anyway I would use them with some custom edits.

    At first I got the standard h6 bottom margin, with about 25/30 pixels on the bottom all stacked on top of one another. I added a display: inline to my stylesheet which solved the problem and had them sitting next to one another. However, after I added more than 5 or so links they started overlaying one another.

    http://justavisual.net/2013/?page_id=25

    Here is my stylesheet code for the h6

    h6 {
    	font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 19px;
    	color: #FFFFFF;
    	padding-top: 3px;
    	padding-bottom: 3px;
            padding-left: 5px;
            padding-right: 5px;
            text-align: center;
            display: inline;
            margin-bottom: 10px;
    
    }
    
    h6 a {
    	font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 19px;
    	color: #FFFFFF;
    	padding-top: 3px;
    	padding-bottom: 3px;
            padding-left: 5px;
            padding-right: 5px;
            background-color:#000000;
            margin-bottom: 10px;
    }
    
    h6 a:hover {
    	font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 19px;
    	color: #000000;
    	padding-top: 3px;
    	padding-bottom: 3px;
            padding-left: 5px;
            padding-right: 5px;
            background-color:#cccc00;
            text-decoration: none;
            margin-bottom: 10px;
    }

    As you can see I thought that adding a margin-bottom tag might help the problem but I'm sort of out of ideas. Anyone have a good solution for this?

    Thank you in advance.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding line height? Margins are for block elements.

    By the way, I think you have a plugin that's stopping my developer tool from working. I cannot use Google Chrome's built-in developer tool to edit your CSS.

  3. xfourninetwox
    Member
    Posted 1 year ago #

    I tried the line height, it didn't work initially but perhaps it's because I'm entering it in incorrectly? How would you suggest I phrase it?

    I just tried a simple margin as well but that doesn't seem to work either

    Also, not sure about the plugin... sorry I can't help you there.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    How would you suggest I phrase it?

    See http://www.w3schools.com/cssref/pr_dim_line-height.asp

  5. xfourninetwox
    Member
    Posted 1 year ago #

    Thanks, the line-hight 200% worked perfectly. I appreciate your help.

Topic Closed

This topic has been closed to new replies.

About this Topic