Thanks all for quick answers. I have a very basic familiarity with css.
With a quick google search I found "margin-bottom". Is this what you meant can be used in css for vertical spacing between the objects? What if it is just a plain text in html body? Do I need to put it in a container to implement a BR?
If I understand you correctly, the answer is yes.
To write well-formed HTML, your text should be parsed out into individual containers according to their type. Here's an example...
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is a paragraph. Each paragraph should be seperated in its own P container.</p>
- <h1>This is Heading 1</h1>
- <h2>This is Heading 2</h2>
- <p>This is a paragraph. Each paragraph should be seperated in its own P container.</p>
The way you would control the spacing between paragraphs, headings, lists, etc. is to apply margining to all P containers, like so...
This would give every instance of a <p> tag (paragraph) a uniform spacing throughout the document.
You can use a <br /> within the <p> tag, as its an appropriate container - referring to what ATNO rightly said. However, it should not be used to create spaces between paragraphs.
Here's another example. Let's say I have a paragraph...
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada sem quam, vitae lacinia enim. Donec porttitor placerat purus, ac sodales purus vulputate eget. Cras mollis pharetra rutrum. Vestibulum cursus molestie metus eu pharetra. Duis pharetra rhoncus rhoncus. Fusce pulvinar lobortis est dictum blandit. Curabitur euismod pretium ullamcorper. Integer vel purus urna. Vivamus pulvinar euismod elit eu consectetur. Maecenas ut adipiscing metus. Maecenas eu arcu at ipsum sollicitudin venenatis. Pellentesque tempor laoreet orci in posuere. Maecenas ut massa sit amet velit commodo vestibulum. Duis felis nunc, malesuada vel facilisis ut, pretium sit amet ipsum. Nullam molestie pretium leo, in luctus nibh lacinia quis. Integer sit amet nulla nisl, vitae feugiat turpis. Sed sit amet magna justo. Phasellus mollis adipiscing mi quis pellentesque. Quisque at orci vel neque egestas suscipit sit amet at tellus. </p>
...and I wanted to add an inset image. I could accomplish that with markup and CSS, like so...
<p> <img src="some.jpg" style="float:left;margin:5px;" alt="Alternative Text" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada sem quam, vitae lacinia enim. Donec porttitor placerat purus, ac sodales purus vulputate eget. Cras mollis pharetra rutrum. Vestibulum cursus molestie metus eu pharetra. Duis pharetra rhoncus rhoncus. Fusce pulvinar lobortis est dictum blandit. Curabitur euismod pretium ullamcorper. Integer vel purus urna. Vivamus pulvinar euismod elit eu consectetur. Maecenas ut adipiscing metus. Maecenas eu arcu at ipsum sollicitudin venenatis. Pellentesque tempor laoreet orci in posuere. Maecenas ut massa sit amet velit commodo vestibulum. Duis felis nunc, malesuada vel facilisis ut, pretium sit amet ipsum. Nullam molestie pretium leo, in luctus nibh lacinia quis. Integer sit amet nulla nisl, vitae feugiat turpis. Sed sit amet magna justo. Phasellus mollis adipiscing mi quis pellentesque. Quisque at orci vel neque egestas suscipit sit amet at tellus. </p>
This would cause the text to wrap around the image, but also leave some negative space too.
September 10th, 2009, 9:43 am
