h6 Spacing Help in page

  • Resolved xfourninetwox

    (@xfourninetwox)


    11 years, 8 months 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.

    https://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)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How would you suggest I phrase it?

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

    Thread Starter 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.