• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 228
  • Last Modified:

Pure CSS way to control bottom-border position

What I would like to do is create a bottom-border immediately following my title. Right now I can create the bottom-border, but there seems to be some spacing between the title and the border.  I want the title to basically be sitting on the bottom-border.  I've attached my CSS..please help!  
span.title {
	font-weight:bold;
	font-size:26px;
	color:#9ab324;
	border-bottom: 3px solid #0f490f;
	font-family:Arial, Helvetica, sans-serif;
	position:relative;
	width:100%;
	display:block;
	margin-bottom:0px;
	padding-bottom:0px
}

Open in new window

0
trifecta2k
Asked:
trifecta2k
1 Solution
 
djgeracCommented:
Please try the solution below.  It works because the -6px for the bottom margin of the p tag
.title p {
      padding: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: -6px;
      margin-left: 0px;
}

<span class="title"><p>This is a test</p></span>

0
 
trifecta2kAuthor Commented:
Thanks for the quick response.  That worked perfectly.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now