white-space: pre-line adds unusal space at top

I've a below piece of css declaration which adds line spacing given in the below screenshot.

.colGroup{

    white-space: pre-line;

}

I've tried adding the below attributes but with no luck.

display: inline-block;

vertical-align: top;

height: 4.75em;

line-height: 1.75em;

EDIT (added part of the repeating <td> tag where I'm facing this issue).

<td width="15%">

    <span class="colGroup">

       <div>

            <p id="c2308view">

                t = 24 

                t1 = 27 

                t2 = 27 

                t3 = 36

                </p> 

            </div>

        </span>

        <span class="dateColumn">

            <div>

                <p id="c2312view"><span>31-Dec-2010</span></p>

            </div>

        </span>

</td>

Can someone help?

Screenshot

edited Nov 20 '18 at 17:30

chazsolo

5,2021233

asked Nov 20 '18 at 13:54

David R

7,03942751

3

Show us your HTML code as well

– Itay Gal
Nov 20 '18 at 13:56

Presumably because you have extra whitespace there, that you didn’t notice previously, because of how it gets collapsed under normal circumstances …

– misorude
Nov 20 '18 at 14:02

@ItayGal Added. Thanks!

– David R
Nov 20 '18 at 16:46

Where you used '.colGroup' selector in your markup?

– Hanif
Nov 20 '18 at 16:53

@Hanif Sorry, Updated my html.. Please check.

– David R
Nov 20 '18 at 17:11

|
show 1 more comment

I've a below piece of css declaration which adds line spacing given in the below screenshot.

.colGroup{

    white-space: pre-line;

}

I've tried adding the below attributes but with no luck.

display: inline-block;

vertical-align: top;

height: 4.75em;

line-height: 1.75em;

EDIT (added part of the repeating <td> tag where I'm facing this issue).

<td width="15%">

    <span class="colGroup">

       <div>

            <p id="c2308view">

                t = 24 

                t1 = 27 

                t2 = 27 

                t3 = 36

                </p> 

            </div>

        </span>

        <span class="dateColumn">

            <div>

                <p id="c2312view"><span>31-Dec-2010</span></p>

            </div>

        </span>

</td>

Can someone help?

Screenshot

edited Nov 20 '18 at 17:30

chazsolo

5,2021233

asked Nov 20 '18 at 13:54

David R

7,03942751

3

Show us your HTML code as well

– Itay Gal
Nov 20 '18 at 13:56

Presumably because you have extra whitespace there, that you didn’t notice previously, because of how it gets collapsed under normal circumstances …

– misorude
Nov 20 '18 at 14:02

@ItayGal Added. Thanks!

– David R
Nov 20 '18 at 16:46

Where you used '.colGroup' selector in your markup?

– Hanif
Nov 20 '18 at 16:53

@Hanif Sorry, Updated my html.. Please check.

– David R
Nov 20 '18 at 17:11

|
show 1 more comment

I've a below piece of css declaration which adds line spacing given in the below screenshot.

.colGroup{

    white-space: pre-line;

}

I've tried adding the below attributes but with no luck.

display: inline-block;

vertical-align: top;

height: 4.75em;

line-height: 1.75em;

EDIT (added part of the repeating <td> tag where I'm facing this issue).

<td width="15%">

    <span class="colGroup">

       <div>

            <p id="c2308view">

                t = 24 

                t1 = 27 

                t2 = 27 

                t3 = 36

                </p> 

            </div>

        </span>

        <span class="dateColumn">

            <div>

                <p id="c2312view"><span>31-Dec-2010</span></p>

            </div>

        </span>

</td>

Can someone help?

Screenshot

edited Nov 20 '18 at 17:30

chazsolo

5,2021233

asked Nov 20 '18 at 13:54

David R

7,03942751

I've a below piece of css declaration which adds line spacing given in the below screenshot.

.colGroup{

    white-space: pre-line;

}

I've tried adding the below attributes but with no luck.

display: inline-block;

vertical-align: top;

height: 4.75em;

line-height: 1.75em;

EDIT (added part of the repeating <td> tag where I'm facing this issue).

<td width="15%">

    <span class="colGroup">

       <div>

            <p id="c2308view">

                t = 24 

                t1 = 27 

                t2 = 27 

                t3 = 36

                </p> 

            </div>

        </span>

        <span class="dateColumn">

            <div>

                <p id="c2312view"><span>31-Dec-2010</span></p>

            </div>

        </span>

</td>

Can someone help?

Screenshot

html css css3

edited Nov 20 '18 at 17:30

chazsolo

5,2021233

asked Nov 20 '18 at 13:54

David R

7,03942751

edited Nov 20 '18 at 17:30

chazsolo

5,2021233

asked Nov 20 '18 at 13:54

David R

7,03942751

edited Nov 20 '18 at 17:30

chazsolo

5,2021233

edited Nov 20 '18 at 17:30

chazsolo

5,2021233

edited Nov 20 '18 at 17:30

chazsolo

5,2021233

asked Nov 20 '18 at 13:54

David R

7,03942751

asked Nov 20 '18 at 13:54

David R

7,03942751

asked Nov 20 '18 at 13:54

David R

7,03942751

3

Show us your HTML code as well

– Itay Gal
Nov 20 '18 at 13:56

Presumably because you have extra whitespace there, that you didn’t notice previously, because of how it gets collapsed under normal circumstances …

– misorude
Nov 20 '18 at 14:02

@ItayGal Added. Thanks!

– David R
Nov 20 '18 at 16:46

Where you used '.colGroup' selector in your markup?

– Hanif
Nov 20 '18 at 16:53

@Hanif Sorry, Updated my html.. Please check.

– David R
Nov 20 '18 at 17:11

|
show 1 more comment

3

Show us your HTML code as well

– Itay Gal
Nov 20 '18 at 13:56

Presumably because you have extra whitespace there, that you didn’t notice previously, because of how it gets collapsed under normal circumstances …

– misorude
Nov 20 '18 at 14:02

@ItayGal Added. Thanks!

– David R
Nov 20 '18 at 16:46

Where you used '.colGroup' selector in your markup?

– Hanif
Nov 20 '18 at 16:53

@Hanif Sorry, Updated my html.. Please check.

– David R
Nov 20 '18 at 17:11

Show us your HTML code as well

– Itay Gal
Nov 20 '18 at 13:56

Presumably because you have extra whitespace there, that you didn’t notice previously, because of how it gets collapsed under normal circumstances …

– misorude
Nov 20 '18 at 14:02

@ItayGal Added. Thanks!

– David R
Nov 20 '18 at 16:46

Where you used '.colGroup' selector in your markup?

– Hanif
Nov 20 '18 at 16:53

@Hanif Sorry, Updated my html.. Please check.

– David R
Nov 20 '18 at 17:11

|
show 1 more comment

2 Answers
2

active

oldest

votes

I ran into this just yesterday. I did something like this:

.colGroup{

white-space: pre-line;

margin-top: 0px;

}

answered Nov 20 '18 at 14:04

Robby

4821025

Hi Robby, Thanks for the reply. However I had no luck with this. Thanks anyway!

– David R
Nov 20 '18 at 16:46

Do you have any styling for #c2308view set?

– Robby
Nov 21 '18 at 13:56

add a comment |

I just recently had to deal with the way various white-space values are handled within css. The documentation on MDN for white-space is very helpful. See this, and the entire page: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

What does it mean when you use the following css?

white-space: pre-line;

This will preserve line-breaks in your code, while collapsing white space. Line-breaks can be explict   elements or newline characters.

Look again at your code. Notice, while you can't see character, you return three times before getting to the values within the  element. There is a hidden newline character being read by the DOM.

<span class="colGroup"> /* newline character 1 */

   <div> /* newline character 2 */

        <p id="c2308view"> /* newline character 3 */

            t = 24 /* newline character 4, which I assume you want to preserve */

If you remove these returns within your code, while the syntax is not all that readable, it will honor the white-space value you are desiring.

See the snippet below:

.colGroup {

    white-space: pre-line;

}

<td width="15%">

    <span class="colGroup"><div><p id="c2308view">t = 24 

t1 = 27 

t2 = 27 

t3 = 36</p></div></span>

    <span class="dateColumn">

        <div>

            <p id="c2312view">

                <span>31-Dec-2010</span>

            </p>

        </div>

    </span>

</td>

answered Nov 20 '18 at 17:29

wlh

1,8581823

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53394575%2fwhite-space-pre-line-adds-unusal-space-at-top%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I ran into this just yesterday. I did something like this:

.colGroup{

white-space: pre-line;

margin-top: 0px;

}

answered Nov 20 '18 at 14:04

Robby

4821025

Hi Robby, Thanks for the reply. However I had no luck with this. Thanks anyway!

– David R
Nov 20 '18 at 16:46

Do you have any styling for #c2308view set?

– Robby
Nov 21 '18 at 13:56

add a comment |

I ran into this just yesterday. I did something like this:

.colGroup{

white-space: pre-line;

margin-top: 0px;

}

answered Nov 20 '18 at 14:04

Robby

4821025

Hi Robby, Thanks for the reply. However I had no luck with this. Thanks anyway!

– David R
Nov 20 '18 at 16:46

Do you have any styling for #c2308view set?

– Robby
Nov 21 '18 at 13:56

add a comment |

I ran into this just yesterday. I did something like this:

.colGroup{

white-space: pre-line;

margin-top: 0px;

}

answered Nov 20 '18 at 14:04

Robby

4821025

I ran into this just yesterday. I did something like this:

.colGroup{

white-space: pre-line;

margin-top: 0px;

}

answered Nov 20 '18 at 14:04

Robby

4821025

answered Nov 20 '18 at 14:04

Robby

4821025

answered Nov 20 '18 at 14:04

Robby

4821025

answered Nov 20 '18 at 14:04

Robby

4821025

Hi Robby, Thanks for the reply. However I had no luck with this. Thanks anyway!

– David R
Nov 20 '18 at 16:46

Do you have any styling for #c2308view set?

– Robby
Nov 21 '18 at 13:56

add a comment |

Hi Robby, Thanks for the reply. However I had no luck with this. Thanks anyway!

– David R
Nov 20 '18 at 16:46

Do you have any styling for #c2308view set?

– Robby
Nov 21 '18 at 13:56

Hi Robby, Thanks for the reply. However I had no luck with this. Thanks anyway!

– David R
Nov 20 '18 at 16:46

Do you have any styling for #c2308view set?

– Robby
Nov 21 '18 at 13:56

add a comment |

What does it mean when you use the following css?

white-space: pre-line;

This will preserve line-breaks in your code, while collapsing white space. Line-breaks can be explict   elements or newline characters.

<span class="colGroup"> /* newline character 1 */

   <div> /* newline character 2 */

        <p id="c2308view"> /* newline character 3 */

            t = 24 /* newline character 4, which I assume you want to preserve */

If you remove these returns within your code, while the syntax is not all that readable, it will honor the white-space value you are desiring.

See the snippet below:

.colGroup {

    white-space: pre-line;

}

<td width="15%">

    <span class="colGroup"><div><p id="c2308view">t = 24 

t1 = 27 

t2 = 27 

t3 = 36</p></div></span>

    <span class="dateColumn">

        <div>

            <p id="c2312view">

                <span>31-Dec-2010</span>

            </p>

        </div>

    </span>

</td>

answered Nov 20 '18 at 17:29

wlh

1,8581823

add a comment |

What does it mean when you use the following css?

white-space: pre-line;

This will preserve line-breaks in your code, while collapsing white space. Line-breaks can be explict   elements or newline characters.

<span class="colGroup"> /* newline character 1 */

   <div> /* newline character 2 */

        <p id="c2308view"> /* newline character 3 */

            t = 24 /* newline character 4, which I assume you want to preserve */

If you remove these returns within your code, while the syntax is not all that readable, it will honor the white-space value you are desiring.

See the snippet below:

.colGroup {

    white-space: pre-line;

}

<td width="15%">

    <span class="colGroup"><div><p id="c2308view">t = 24 

t1 = 27 

t2 = 27 

t3 = 36</p></div></span>

    <span class="dateColumn">

        <div>

            <p id="c2312view">

                <span>31-Dec-2010</span>

            </p>

        </div>

    </span>

</td>

answered Nov 20 '18 at 17:29

wlh

1,8581823

add a comment |

What does it mean when you use the following css?

white-space: pre-line;

This will preserve line-breaks in your code, while collapsing white space. Line-breaks can be explict   elements or newline characters.

<span class="colGroup"> /* newline character 1 */

   <div> /* newline character 2 */

        <p id="c2308view"> /* newline character 3 */

            t = 24 /* newline character 4, which I assume you want to preserve */

If you remove these returns within your code, while the syntax is not all that readable, it will honor the white-space value you are desiring.

See the snippet below:

.colGroup {

    white-space: pre-line;

}

<td width="15%">

    <span class="colGroup"><div><p id="c2308view">t = 24 

t1 = 27 

t2 = 27 

t3 = 36</p></div></span>

    <span class="dateColumn">

        <div>

            <p id="c2312view">

                <span>31-Dec-2010</span>

            </p>

        </div>

    </span>

</td>

answered Nov 20 '18 at 17:29

wlh

1,8581823

What does it mean when you use the following css?

white-space: pre-line;

This will preserve line-breaks in your code, while collapsing white space. Line-breaks can be explict   elements or newline characters.

<span class="colGroup"> /* newline character 1 */

   <div> /* newline character 2 */

        <p id="c2308view"> /* newline character 3 */

            t = 24 /* newline character 4, which I assume you want to preserve */

If you remove these returns within your code, while the syntax is not all that readable, it will honor the white-space value you are desiring.

See the snippet below:

.colGroup {

    white-space: pre-line;

}

<td width="15%">

    <span class="colGroup"><div><p id="c2308view">t = 24 

t1 = 27 

t2 = 27 

t3 = 36</p></div></span>

    <span class="dateColumn">

        <div>

            <p id="c2312view">

                <span>31-Dec-2010</span>

            </p>

        </div>

    </span>

</td>

.colGroup {

    white-space: pre-line;

}

<td width="15%">

    <span class="colGroup"><div><p id="c2308view">t = 24 

t1 = 27 

t2 = 27 

t3 = 36</p></div></span>

    <span class="dateColumn">

        <div>

            <p id="c2312view">

                <span>31-Dec-2010</span>

            </p>

        </div>

    </span>

</td>

.colGroup {

    white-space: pre-line;

}

<td width="15%">

    <span class="colGroup"><div><p id="c2308view">t = 24 

t1 = 27 

t2 = 27 

t3 = 36</p></div></span>

    <span class="dateColumn">

        <div>

            <p id="c2312view">

                <span>31-Dec-2010</span>

            </p>

        </div>

    </span>

</td>

answered Nov 20 '18 at 17:29

wlh

1,8581823

answered Nov 20 '18 at 17:29

wlh

1,8581823

answered Nov 20 '18 at 17:29

wlh

1,8581823

answered Nov 20 '18 at 17:29

wlh

1,8581823

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu