SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Prevent excesive use of <br />

    Hi all:

    "When I used the p element to begin a new paragraph in html, it automatically creates some space above and below the content"

    "This space is applied by the browser's build-in style, but it can be override as needed by using CSS".

    To solved this in my page www.acesapr.org/forms.html I used too many <br />.
    Please see page.

    My question is:

    How can I prevent the excesive use of <br /> using CSS to align correctly the content of the 2 columns.

    Thanks for the help,

    Victor

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Simply set the top and bottom margins and padding on your paragraph tags to control the amount of space between them.

    Use classes to control which paragraphs to apply what spacing to.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    ˇBienvenido a Sitepoint!

    As Felfall said.... use CSS , specifically padding and and/or margin to control the space between tags, if the tag is not block level by default, you can make it so by using display block ( again eliminating the need for BR)

    But I was looking at your code and this is a case where a TABLE would be the thing to use. Not only will it help you line things up the way you want .. the information is TABULAR ( de tablas)...

    if you still want more space... you can use TD {padding-bottom: (the amount of spce you want)}

  4. #4
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help and advice.

    If a deleted the <br /> and then in my column classes for both column defined margins and padding equal to zero when I pressed enter to move down the text it appears <p>text</p> or <&npsp> if I pressed the enter again. Thie result is that the text in both column do not align correctly.

    Is there a way to prevent the <p></p> tag from appear using CSS?

    Can you give me an example of how to modify the p tags, please.

    Thanks

    Victor

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again:

    <br> does have its uses, but if you are writing paragraphed text, use the p tag - that's why it's there. If you hate the huge margins it makes, control them with CSS. I mean really, it's not that hard.
    My question is:

    How I control de p-tag huge margins (one space line abobe and below text) it makes using CSS?

    I agree that using Tables is the correct way to do it but I also want learn it using CSS. I do not want any space above and below using p tag. That way I can align correctly the text in CSS tables without using <br>.


    Your help is appreciate.

    Thanks

    Victor

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Where you want to align tabular data the correct way to do it is using a table. The only way to do similar alignments using CSS is to use display:table but that doesn't work in IE7 or earlier and is intended for layout tables and not for tabular data.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •