August 15, 201214 yr Hi Guys, Could someone explain to me why when putting <p></p> inside a div, this causes the paragraph to drop down a line, usually lower than intended? Is it best practice, when putting text inside a div, to enclose the text within <p> tags? Please see attached example. With <p> tags Without <p> tags Thanks in advance. Edited August 15, 201214 yr by ScottBrown
August 15, 201214 yr Hi, firstly yes I would always enclose text within a tag beit header, paragraph, li, or anchor. Your paragraph element has a default line height and margin set by the browser's inbuilt style sheet but you can and in my opinion should negate these values and set your own rules. The first thing is to minimise the browser,s inbuilt style as much as possible using *{margin:0;padding:0;border:0;} You can then set your own values for paragraph and/or individual paragraph class or id as you require. Could be something like: #something p{font-size:1em;line-height:1.1em;margin:0 1em 1em 1em;} which would make you div id something paragraph text stay close to the top of the div. Hope this helps. Jim
August 15, 201214 yr As others have said it's good practice, but the reason it is dropping down is that <p> tags have margins on them. Basically, HTML and CSS has certain defaults, such as the code that makes h1's and h2's certain sizes, even without you having to put any styles in. In order to make sure you have a completely 'clean slate' to start with, it's usually popular to start your project with a reset (I quite like normalize.css). You download this stylesheet, and it resets all the odds and ends you might come across into something much neater and easier to work with. E.g it will remove that margin so that your <p> tag doesn't automatically drop down. Of course you might want the <p> tag to drop down, or have another style with it's normal generated style. In which case, you can just put it back in yourself (so you get more control over your CSS.)
August 15, 201214 yr It's probably a default margin. Always start your stylesheet with a reset. As above. Different browsers have different default ways of styling elements. Most will ad their own variation of margins and padding to a <p> tag. Use the CSS reset to get everything to a baseline at which you can apply your own consistent styles.
August 15, 201214 yr Browsers will apply their own styles to the p tag which usually involves a before and after margin. Over-riding the browser styles with a reset should fix this.
September 5, 201214 yr This an simple code for <p> inside Div tag: <html> <body> <div style="color:#00FF00"> <h3>This is an example of paragraph tag inside div tag</h3> <p>The paragraph starts here.</p> </div> </body> </html>
September 5, 201214 yr This an simple code for <p> inside Div tag: <html> <body> <div style="color:#00FF00"> <h3>This is an example of paragraph tag inside div tag</h3> <p>The paragraph starts here.</p> </div> </body> </html> genius.
September 5, 201214 yr This an simple code for <p> inside Div tag: <html> <body> <div style="color:#00FF00"> <h3>This is an example of paragraph tag inside div tag</h3> <p>The paragraph starts here.</p> </div> </body> </html> And that helps with the original question how exactly?
September 5, 201214 yr Hi Guys, Could someone explain to me why when putting <p></p> inside a div, this causes the paragraph to drop down a line, usually lower than intended? Is it best practice, when putting text inside a div, to enclose the text within <p> tags? Please see attached example. With <p> tags Without <p> tags Thanks in advance. p tags have an automatic line break before the opening tag and after the closing tag
Create an account or sign in to comment