Issue with CSS specificity(?)

Question

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:

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:

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!

Best way to get a fast answer is to copy your relevant html and css into jsfiddle.net or codepen.io and then post the link — Patrick
– Patrick, Commented Apr 18, 2016 at 21:13
Show us your relevant HTML + CSS (that's not enough to help you at the moment) — dippas
– dippas, Commented Apr 18, 2016 at 21:13
The two answers (so far) are stabs in the dark. There is not enough information in your question to answer it. Keep in mind that MOST WordPress sites load thousands of lines of CSS. There is almost certainly another style getting picked up (in your second screenshot). You really need to inspect the rules - so using your inspector, look at the css rules being applied, and trace down through them - you'll almost certainly find it's inheriting some rule from somewhere else. When you find that, if you can't solve the issue, then bring that code to your question. — random_user_name
– random_user_name, Commented Apr 18, 2016 at 21:17

David Nguyen · Accepted Answer · 2016-04-18 21:16:14Z

1

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.

edited Apr 18, 2016 at 21:16

answered Apr 18, 2016 at 21:12

David Nguyen

8,5182 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dippas Over a year ago

why giving answers when there isn't enough info from the OP ?

Ian P Over a year ago

Perfect -- thank you. Thanks to everyone else who took a stab at it as well. I now see how to trace the styles that are applied to the element in Chrome Developer Tools.

bmaximuml · Accepted Answer · 2016-04-18 21:13:24Z

0

In the CSS, try specifying

padding : 0;

So it would be:

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

answered Apr 18, 2016 at 21:13

bmaximuml

714 bronze badges

1 Comment

dippas Over a year ago

why giving answer when there isn't enough info from the OP ?

Collectives™ on Stack Overflow

Issue with CSS specificity(?)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related