CODEWITHSUNDEEP
htmlcss
Ian P
Ian P

Reputation: 12993

Issue with CSS specificity(?)

I'm a complete CSS novice -- my background is back-end development. So please forgive the ignorance in advance.

I'm attempting to learn a bit more about the application (or.. practical use) of CSS.

Given the following CSS:

.input-size {
    height: 25px;
    width: 250px;
}

I'm trying to figure out why the following line of HTML in a WordPress page produces odd results:

<input type="text" placeholder="Search" class="input-size">

I believe the issue has to do with specificity, but I am unsure on how to give a heavier weight to the style above.

The following image is what I expect:

http://imgur.com/Vez8WlQ.jpg

Notice the spacing between the bottom of the element and the canvas below.

However, when I apply the style to a textbox, I get the following:

enter image description here

There appears to be about a 25 pixel padding at the bottom, but that is not specified in the style posted above.

Any advice on moving forward would be appreciated. I'm, unfortunately, unsure of how to proceed with figuring out what could be causing the issue.

Thank you!

Upvotes: 0

Views: 44

Answers (2)

David Nguyen
David Nguyen

Reputation: 8528

What you have is correct, however you do not have padding defined in your new class. What is most likely happening is that padding is defined for input and it just inheriting the properties from the default style. Since you have it inspected - trace the margin rule.

Upvotes: 1

bmaximuml
bmaximuml

Reputation: 71

In the CSS, try specifying 

padding : 0;

So it would be:

.input-size {
    height: 25px;
    width: 250px;
    padding:0;
}

Upvotes: 0

Related Questions