Menu
I know this is very basic CSS. How do I keep the span contained within the div? At the moment, the span extends outside the top and bottom of the div.
div {
width: 200px;
margin: 10px;
background-color: #ff0;
}
span {
margin: 5px;
padding: 5px;
background-color: #fc0;
}<body>
<div>
<span>span</span>
</div>
</body>
328
The reason vertical padding /margin does not work with spans is that it's an inline element.
span won't have padding because it is an inline element by default, so set inline-block or block.
This problem basically occurs when the height and width of DIV element are small such that all the text can not be fitted in that DIv.
The <span> tag is a inline element, it fits into the flow of the content and can be distributed over multiple lines. We can not specify a height or width or surround it with a margin. It can be placed inside a paragraph to define a part of it without affecting the appearance of the text.
To answer your question, this isn't just an issue with padding or margin, but also with width, display, and the box model.
jsFiddle
span {
display: inline-block;
}
This will honor any padding, margins, or widths you apply to the span.
88
Inline elements will not consume vertical padding and margin space. You can make the span display: block, but without more detail I don't know if that will achieve your goal.
35
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
