Menu
Here is two spans(in real life a lot of spans) situated at the web page. I would like to set the distance betwwen them. I want to use margin-bottom attribute for this, but I can't see any affect of using it. The spans are still on the previous position. That is wrong. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">
.position, .name{
overflow: hidden;
}
.position{
margin-bottom: 40px;
}
</style>
</head>
<body>
<span class="position">Designer</span><br/>
<span class="name">John Smith</span>
</body>
</html>
640
Since span tags are inline, not block elements. They can only take margin left and right, not top and bottom.
Try: margin: 10px or similar in the span styles. That gives you a space. If you need more than one whitespace, you can use entity.
margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside something, whereas padding is the space inside something.
The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
span is an inline element, not a block element, and they don't respect (vertical) margin. You can use padding or make the span display:inline-block; and then use margins. The latter is now supported in most somewhat newer browsers.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
