Cant close up these white spaces

I copied your code to a working page and this is what I see:

The wrapper is centered on the page.

This is my interpretation of your description:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/cant-close-up-these-white-spaces/278336
slimpickings
Oct 14, 2017 8:18 AM
-->
    <style>
.widthwrapper {
    display:table;
    width:20em;  /* display:table treats width as min-width.  If needed. (probably not) */
    height:6em;  /* display:table treats height as min-height. Likewise, if needed. (probably not) */
    border:4px solid #f0f;
    border-width:4px 0;
    background:#ace;
    border-radius:0.75em;
    padding:.5em;
    margin:0 auto;  /* centers the wrapper */
}
/* try dragging the text area taller and wider than coded and see what happens. Expect scroll bars if text height exceeds height of textarea */
textarea {
    display:block;
    min-width:16em;
    min-height:6em;
    margin:0 auto;
}
input {
    display:table;
    margin:1em auto 0;
}

    </style>
</head>
<body>

<div class="widthwrapper">
    <form action="writing2.php" method='post'>
        <textarea name="textblock"></textarea>
        <input type='submit' value='Add text'>
    </form>
</div>

</body>
</html>

I changed some colors and values for demo clarity.

Don’t know how to post a snapshot.

SamA74 hit it spot on, looks as ugly as sin, but was only an exercise. Thanks to yourself and others I think I’ve made real progress getting my head around this tonight. I guess we’ll find out tomorrow/today (now 4,40am here).
Thanks for all your help, you must get sick of the stupid questions.

Not tables, but block elements.
Block elements by default stack vertically.
The textarea and input are in-line elements by default, that’s why they were side by side to start with, until changed to display: block.

There is actually no need to the widthwrapper div, those styles could have been applied directly to the form element.

2 Likes

It’s easier for me to picture them in my head as tables.

And I see what you mean.

The text not wrapping in “This was added to the text file:” is a php problem correct ??

Hope you don’t mind but I copied your script, it looked so much better than mine.

Colors on mine were me just playing around, I’m color blind so its not always the easiest knowing or figuring out what looks good.

Thanks for your help

1 Like

Good heavens, no, I don’t mind. If it’s posted, it’s free to use as you see fit .

If you are completely color blind, you might ask a friend’s opinion of my colors. I typically use contrasting colors in demos so members can experiment with code values and see the effects easily. My color choices may not be the best choices for a finished page. There are color tools available on the internet that can recommend colors in a variety of ways.

I do hope that you read the comments in the CSS that briefly explained a few of the behaviors. If you have more questions, don’t hesitate to ask.

Cheers!

1 Like

Dude already playing with info from the comments. Was meant to go to bed, sun’s up, birds are singing. Find it hard to stop

Thanks again

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.