16/23 не задается именно margin-right у input

Курсы §10. Блочная модель документа
1

image
image.png1680×1050 124 KB

html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;

font-size: 14px;
line-height: 1.5;
font-family: “Arial”, sans-serif;
color: white;

background-color: #3a78a1;
background-image: url(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}

input[type=“text”] {
box-sizing:border-box;
height: 38px;
margin:20px;
padding:10px;
font-size: 18px;
font-family: inherit;

border: 2px solid #cccccc;
border-radius: 5px;
}
.block {
background-color: rgba(0, 255, 255, 0.2);
}
.block2 {
height:78px;
margin:18px;
}
.block1{
width:516px;
height:114px;
border:2px solid white;
}

2

Почему вы считаете, что не задается? и у блока2 и у инпута маргины есть

1 лайк
3

прошу прощения, я не уточнил,
не задается именно margin-right у input
из-за этого никак не могу убрать вылезания белого кусочка формы справа

4

Маргин у инпута у вас задан (можете глянуть через DevTools), просто на "вылезание он у вас никак повлиять не может. У вас прописано box-sizing:border-box и width:100%, поэтому ширина инпута равна ширине родителя (т.е. зафиксирована), но у вас есть ещё и маргины. Левый маргин отталкивает инпут от границы родителя и смещает инпут вправо и правый маргин просто “выпадает” за границы родителя.

1 лайк