Home/ Questions/Q 6001825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:53:23+00:00

This should be an easy one for someone. I am creating tabs with CSS

  • 0

This should be an easy one for someone. I am creating tabs with CSS (please, I don’t need suggestions for how to make them look better, this is what my customer wants). As you can see in the image below, my tabs and my “tab bar” don’t line up. I do not know why.

enter image description here

The HTML:

<html>
    <head>
        <link rel="stylesheet" href="prototype.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="content">
                <div id="tabs">
                    <span id="tab0" class="tab">
                        No Circuit
                    </span>
                    <span id="tab1" class="tab">
                        Digital Inputs
                    </span>
                </div>
            </div>
        </div>
    </body>
<html>

The CSS:

#container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    position: float;
    width: 900px;
}

#content {
    border: 1px solid black;
    margin-top: 15px;
    padding: 15px;
    position: relative;
    width: 868px;
}

#tabs {
    border-top: 1px solid black;
    width: 100%;
}

.tab {
    border: 1px solid black;
    margin-left: 5px;
    margin-top: 2px;
    padding: 3px;
}

I appreciate any help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try: http://jsfiddle.net/dYz9k/1/

    .tab {
    border: 1px solid black;
    border-top: 0;
    margin-left: 5px;
    padding: 3px;
    display: inline-block
}

    I set display: inline-block, and removed the margin-top and border-top.

    display: inline-block allows the padding to work as you’re expecting.

    • 0