Your Ad Here

how to put pictures side by side


Placing two images side by side using HTML is very simple, since it does not require anything more than a simple image tag. Here is an example:
Code:
<img src="someimage.jpg"><img src="someimage.jpg">

Now, there are many tweaks you can add to this and this can be done using either HTML and/or CSS. Since you asked for both, I will show you how to do it in both.HTML: If you want to add spacing in between the images, then you will need additional coding. What you would want to do is add a margin to one of the images. I will show you how to do this by adding a 10px space by using the left margin of the right image. The coding would look like this:
Code:
<img src="someimage.jpg"><img style="margin-left:10px" src="someimage.jpg">

If you noticed, the second image tag contains a 'style' value which will apply styling to the image in CSS format. The outcome: A 10px space between the first and second image.
CSS: This same effect can be done in pure CSS if you wanted too. First, in your .css file (or css header of the html file), create something similar to this:
Code:
.example{ margin-left:100px; }

Then, when you use the two image tags in HTML, you can reference the 'example' class which you created above in your css script. It's done like this:
Code:
<img src="someimage.jpg"><img class="example" src="someimage.jpg">

Hope that helps

0 comments:

Post a Comment

Popular Posts

Recent posts