HTML img отступы, CSS img по центру, растянуть CSS img

В HTML img отступы появляются в некоторых случаях когда этого не ждешь:

Ясное дело что здесь нам не нужен отступ между картинками. Также отметим что в некоторых случаях возникает отступ под картинкой, и после нее видно пустое место, которое нам не нужно.

Удалить такой отступ между картинками или под одной картинкой довольно просто, для этого просто к картинке присваиваем значение display равным inline-block:

img {
display: inline-block;
}

Также отступ уйдет если к картинке присвоить значение display равным block:

img {
display: block;
}

Отступ под картинкой возникает из за того что картинка по умолчанию имеет свойство display равным inline. Поэтому нужно ей дать значение блочного или блочно-инлайнового. К сожалению не все вебмастеры знают это, и можно увидеть множество сайтов где под картинками стоят большие отступы, отступы ухудшающие дизайн сайта.

Однако не стоит всегда убирать отступ между картинками, в некоторых случаях наоборот нужно добавлять отступы между картинками, чтобы одна картинка отличалась от остальных, чтобы эта картинка не сливалась с другими. Для этого используйте свойство margin.

CSS img по центру

В CSS img по центру поставить не так трудно. Для этого есть два способа.

Если у картинки вы не меняли display на block то в родительском Div просто ставите text-align равным center:

#my {
text-align: center;
}

HTML код предполагается таким:

<div id="my">
<img src='/image.jpg' alt='My photo from Almaty'>
</div>

Если у картинки есть свойство display равным block то этот прием работать не будет, так как картинка стала блочной, а для блочных элементов есть стандартный способ выравнивания по центру (margin: 0 auto;):

#my img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}

HTML код предполагается таким:

<div id="my">
<img src='/image.jpg' alt='My photo from Almaty'>
</div>

Растянуть CSS img

Растянуть CSS img можно вот так:

#my img {
display: block;
max-width: 100%;
height: auto;
}

HTML код предполагается таким:

<div id="my">
<img src='/image.jpg' alt='My photo from Almaty'>
</div>

Вот и все, на этом наш очередной и очень краткий урок по созданию сайтов заканчивается. Надеюсь вы усвоили урок и будете меньше совершать ошибки при верстке сайтов. Если писать чистый и понятный код при создании сайтов вы будете более уверены в себе, кроме этого ваш код будет более понятным другим программистам. А значит будете более цены как работник в команде.

Вэб блог бетінде ақпараттық салаға байланысты көптеген мақалалар бар.