simple css class question

Posted on 2012-09-02
Last Modified: 2012-09-02
I have class of button called .btn specified in css and is used site wide. padding-top:10px;

in this particular div class only I want the button top padding to be set to 0px.


<div class="testDiv">

<a href="" class="btn" title="go">yeah baby!</a>


How can I target just this instance of the button in my css


.testDiv .btn {

doesn't seem to work.

Question by:tf2012
    LVL 10

    Accepted Solution

    If you apply .btn class to anchor tag, youll need to set "display: block". See if that helps you.

    Take a look at example below. The anchor tag is an inline element, and padding top / bottom doesnt work on inline elements. You can increase whitespace by setting line-height or change to display block (from display inline).

    Code below is on jsfiddle:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    	<style type="text/css">
    		div.testDiv {
    			width: 500px;
    			height: 100px;
    			width: 500px;
    			height: 100px;
    		.btn {
    			padding-top: 10px;
    		div.testDiv .btn {
    			padding: 0;
    	<div class="testDiv">
    		<a href="" class="btn" title="go">yeah baby!</a>
    	<div class="foo">
    		<a href="" class="btn" title="go">Yahoo</a>

    Open in new window

    LVL 1

    Author Closing Comment

    great thnx
    LVL 10

    Expert Comment

    great, thanks.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now