CODEWITHSUNDEEP
htmlcssimage
Jack Robson
Jack Robson

Reputation: 2302

stop overflow of img element html

I want to stop the images on the far right from leaking outside the right padding.

The fourth image should stop on the same axis as the red block above it.enter image description here

Does that make sense?

<div style="margin: 0 15px;height: 40px; background-color: red">

</div>
<div style="padding: 0 15px;height: 400px;white-space: nowrap;overflow: hidden;">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
</div>

Upvotes: 2

Views: 61

Answers (1)

P Varga
P Varga

Reputation: 20229

Use margin instead of padding.

<div style="margin: 0 15px;height: 40px; background-color: red">

</div>
<div style="margin: 0 15px;height: 400px;white-space: nowrap;overflow: hidden;">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
</div>

Upvotes: 2

Related Questions