Проблема со спецификацией CSS (?)

Question

Я полный новичок в CSS - мой фон - это базовая разработка. Поэтому, пожалуйста, простите невежество заранее.

Я пытаюсь узнать немного больше о приложении (или практическом использовании) CSS.

Учитывая следующие CSS:

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

Я пытаюсь выяснить, почему следующая строка HTML в WordPress странице дает странные результаты:

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

Я считаю, что вопрос должен делайте со спецификой, но я не уверен, как придать более тяжелый вес стилю выше.

Следующее изображение является то, что я ожидал:

Обратите внимание на расстояние между нижней части элемента и ниже холста.

Однако, когда я применить стиль к текстовому полю, я получаю следующее:

Там, кажется, около 25 пикселей обивка на дне, но это не указано в стиле выше.

Любые советы по продвижению вперед будут оценены по достоинству. Я, к сожалению, не знаю, как начать выяснять, что может вызвать проблему.

Спасибо!

Answer 1

То, что у вас есть, является правильным, однако у вас нет прокладки, определенной в вашем новом классе. Наиболее вероятно, что заполнение задано для input и оно просто наследует свойства по умолчанию. Поскольку вы его проверяли - проследите правило поля.

Answer 2

В CSS, попробуйте указать

padding : 0; 

Так было бы:

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