Search code examples
htmlcsspaddingmargin

Spacing irregularities in html


I'm trying to format text in html, but there's random spacing that wont go away. I tried fixing padding and margins, but that didn't do anything to help.

I'm new to web dev so I'd appreciate some help and guidance!

Here's my code:

<center> <h2> Hello! </h3>  </center> 
    <h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
    <h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
    <h6 style = "padding-left: 20px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>
    


Solution

  • I highly recommend using Chrome's inspect feature (called DevTools) which opens a new window that provides client side coding that makes developing much easier!


    As a brief summary, with DevTools, you can:

    • modify how the site looks and interacts with users in real time (Elements tab). This is client side only (HTML, CSS, JS, etc). CSS is on the right side by default. You can modify code such as CSS to meet your needs which you can then save to your development files.
    • check JavaScript output. This is great for debugging your JS by using console.log() or checking things like JSON output which will be broken down in an understandable, collapsible view (Console tab).
    • locate internal/external references like pictures, .js, .css, etc which you can modify/debug in real time. Notable: When viewing something like a .js file where the data is minified, click the {} in the bottom left which will pretty-print it and make it more legible.
    • There are other features but these are going to be best for you for now.

    This will align the columnar text. The only change was padding-left: 20px; to padding-left: 10px;.

    <center> <h2> Hello! </h3>  </center> 
        <h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
        <h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
        <h6 style = "padding-left: 10px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>
        

    Alternatively, if you are trying to get rid of the space before / after the description, you need to add margin: 0px; like so:

    <center> <h2> Hello! </h3>  </center> 
        <h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
        <h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
        <h6 style = "margin: 0px; padding-left: 10px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>