Repository: vscode
Issue: Add `editor.contentLeftPadding` to add padding between the `editorGutter` and `editor`.
Labels: feature-request,editor-rendering

<!-- ⚠️⚠️ Do Not Delete This! feature_request_template ⚠️⚠️ -->
<!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ -->
<!-- Please search existing issues to avoid creating duplicates. -->

<!-- Describe the feature you'd like. -->
**Note: Please see BOTH screenshots below and also TWO possible solutions at the end!**

Please add some option like `editor.contentLeftPadding` or whatever you want to name it, to resolve at least these two issues:
1. Currently in VS Code, the gutter and the code editor are so close that while clicking in the beginning of a line one can **accidentally click on collapse button** in the gutter region which sometimes really bother the user.

2. When a user apply a different background color to gutter for either theming purpose or to show that it's not part of the editor region, the **code in the editor** and also the **vertical lines** between the first pair of curly braces of code blocks basically **touch the gutter.** See the following first screenshot.

![image](https://user-images.githubusercontent.com/14161646/137374585-28ea3ca9-e545-4711-80ad-3811846c2a6d.png)

If we had  `editor.contentLeftPadding` then the user could just add that to settings.json like this:
```
"workbench.colorCustomizations": {
        "editor.contentLeftPadding": 8px;
        "editorGutter.background" : "#454545",
    },
```
which could separate code from the gutter and look like this:

![image](https://user-images.githubusercontent.com/14161646/137376181-999f40f6-d587-4fd2-839a-688472b5b919.png)

### There are two ways to solve this issue:

1. Adding `editor.contentLeftPadding`  setting. It will not create any changes to VS Code by default as it would take effect only when the user use this setting, hence, those users who are used to the current user interface of the VS Code will not notice this change.
2. However,  **if a little padding is added by default in the VS Code** , it will not be much noticeable to those users who are used to the current look and feel of the user interface **while resolving the above mentioned issues** at the same time!

As VS Code doesn't allow users to add custom CSS in it so a setting like `editor.contentLeftPadding` or **built-in default padding** for editor's content is required.

If built-in default padding is added to VS Code then a **setting to remove that built-in default padding** can also be added so that  the user can remove it if the user doesn't like it, just like the following settings to remove **folding**, **glyphMargin** and **lineNumbers**:
```
"editor.folding": false,
"editor.glyphMargin": false
"editor.lineNumbers": "off",
```
### Proof of concept Implementation and Observation
For proof of concept, I added the following CSS code to the end of this CSS file **/usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.css**:
```
.monaco-editor .lines-content {
    padding-left: 8px;
}
```
which produces the following **neat** and **required** result, such that, now neither I can't accidentally click on folding buttons nor the code touches the gutter:

![image](https://user-images.githubusercontent.com/14161646/137538794-014977f1-98a4-4173-83ac-1ea91e83cdff.png)

**But** I noticed that **_unlike_ HTML textarea tag** which _**allows**_ a user to **click in the padding area** to place cursor at the **_start_** of the nearest line no matter how wide padding you set, in VS Code I can't place the cursor at the start of the line by clicking _in the padding region_ **which might be desirable by some users**.

### My VS Code settings.json:
The following are the settings for those who wonder what settings I have for the **colors of gutter, tabs and breadcrumb** of my VS Code. Note that these color settings look best with **Dart+(default dark)** theme.
```
{
    // Look best with "Dart+(default dark)" theme.
    "workbench.colorCustomizations": {
        "editorGutter.background" : "#454545",

        "editorGroupHeader.tabsBackground": "#454545",        
        "tab.inactiveBackground":  "#454545",

        "tab.activeBackground": "#5b5b5b",
        "breadcrumb.background": "#5b5b5b",     
    },
}
```