HighwayToCode
@HighwayToCode
While Учусь do Туплю

Почему тэг 'button' меньше?

Доброго времени суток, прошу объяснить: почему при данном виде оформления "кнопка" получается меньше остального. Заранее спасибо за ответ.

Скрины и код ниже:

HTML:
<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>
	<div>hello, guys</div>
	<p>hello,girls</p>
	<input/> <br>
	<button>man</button>


</body>
</html>


CSS:
div{
	font-size: 20px;
	border: 3px dashed black;
	width: 25%;
	margin: 10px;
}

p{
	font-size: 20px;
	border: 3px dashed red;
	width: 25%;
	margin: 10px;
}

input{
	font-size: 20px;
	border: 3px dashed red;
	margin: 10px;
	width: 25%;
}

button{
	font-size: 20px;
	border: 3px dashed red;
	background-color: white;
	margin: 10px;
	width: 25%;
}


5aef495c33e84352898158.png
  • Вопрос задан
  • 357 просмотров
Пригласить эксперта
Ответы на вопрос 2
@EvgeniiR
https://github.com/EvgeniiR
Из за border.
Кнопка отрисовывается заданной ширины, и граница в 3 пикселя отрисовывается внутри неё. У остальных блоков граница отрисовывается снаружи. Border у вас = 3px, и можете заметить, что блоки больше кнопки именно на 3+3(6px)
Чтобы это испраивить, можно добавить блокам свойство box-sizing: border-box;
https://codepen.io/evgrom/pen/RyLdzv
Ответ написан
Lumore
@Lumore
Front-end developer
button {
   display: block;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы