Support » Themes and Templates » h6 Spacing Help in page

  • Resolved xfourninetwox

    (@xfourninetwox)


    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Andrew Nevins

    (@anevins)

    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.

    xfourninetwox

    (@xfourninetwox)

    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.

    Moderator Andrew Nevins

    (@anevins)

    How would you suggest I phrase it?

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

    xfourninetwox

    (@xfourninetwox)

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘h6 Spacing Help in page’ is closed to new replies.