Formatting inline elements? What does the generic code look like?
This is a common newbie question, so thanks in advance. I'm trying to figure out the difference between divs and spans, and when and how to use them.
Let's say, for example, I want the image to remain justified, and I want the text to flow around the image to the right while maintaining the justification. If the text goes past the image, I want it to wrap around the bottom of the image ... just as we call the layout world, "wrap".
I'm looking for an example to link, so in your answer can you provide an example of a mark?
Thank you so much!!!
source to share
The SPAN tag is not intended for containers for other tags. This is especially useful when combined with classes.
Use divs to define sections of the page and covers to wrap and style text or text classes.
http://www.learnwebdesignonline.com/htmlcourse/span-div.htm shows a good example of how they are used. For your example of wrapping text, place an image and wrap it in a DIV - for example:
<div>
test test test test <img src="" alt="" style="float:left;margin:8px 0 0 8px; display:inline" /> test test test test test test test test test test test test
</div>
source to share
Block level means it starts on its own line by default, whereas inline sits next to other elements.
[Block]
[Block]
against
[built-in] [built-in]
However, they are not wrapped. If you had text wrapped around the image, you would place the image aside. An example of this would be the following:<img src="picture.jpg" alt="An image" style="float: left" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros. Curabitur posuere. Cras sodales leo quis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum adipiscing nunc vel arcu. Ut sed quam non est molestie commodo. Suspendisse metus erat, cursus fermentum, faucibus nec, pulvinar et, lorem. Praesent odio. In interdum imperdiet enim.
source to share
Divs and spans are like wildcard tags that have no semantic meaning. You can use them to group or identify items when another tag (such as tables, lists, or headings) does not fit. Their differences are as follows:
div
- this is a block level element
-
The default display property is a block, which means:
- its width as its container
- always makes line breaks before and after
- may contain other block-level elements, such as
p
,h1
,table
,ul
,blockquote
,div
- may comprise other embedded items such as
img
,strong
,em
,input
,a
,span
span
- is an inline element
-
The default display property is inline, which means:
- is as narrow as its content
- does not make a line break if not needed)
- you can use css property
vertical-align
with it
- may not contain block level elements
- may comprise other embedded items such as
img
,strong
,em
,input
,a
,span
You can always change your default display property with css, but you cannot change the type of elements they can contain, regardless of the value of the display property. For example:
<span style="display:block">
this will be displayed like a div,
but still cannnot contain block level elements
</span>
Because they are "generic" tags, they are commonly used for microformats in conjunction with classes. For example: <span class="tel">555-5555</span>
because there is no tag <tel>
.
As for wrapping the image, if the image is directly linked to the text, you can use:
<p><img src="image.jpg" style="float: right" alt="my image" />Long paragraph.</p>
And no divs or spacing is required. However, if this is not the case, you can use:
<p>unrelated to the image</p>
<div>
<img src="image.jpg" style="float: right" alt="my image" />
<p>Long paragraph.</p>
</div>
It is div
necessary here , since it p
is a block level element.
Finally, for more information, you can check the official W3C spec about divs and spanans.
source to share