Skip to content

Extra space at the bottom of the panel in sphinx-rtd-theme #168

@reiyw

Description

@reiyw

Describe the bug

When sphinx-rtd-theme is applied as a theme, a space appears at the bottom of the panel that should not be needed.

.. tabs::

   .. tab:: Apples

      Apples are green, or sometimes red.

.. tabs::

   .. code-tab:: c

         int main(const int argc, const char **argv) {
           return 0;
         }

will be rendered as:

image

The cause of this problem seems to be the way margins between content are spaced in sphinx-rtd-theme. Basically, sphinx-rtd-theme uses margin-bottom to control the space between contents. However, if one always leaves a bottom margin, they will end up with extra space at the bottom in so-called adomonition and other elements enclosed in boxes. To deal with this, sphinx-rtd-theme sets margin-bottom: 0 for the last child element contained in such elements.

https://github.com/readthedocs/sphinx_rtd_theme/blob/0da22b885be387b79f7552c92be00fd14d11228a/src/sass/_theme_rst.sass#L126-L133

However, this adjustment is not applied to classes introduced by sphinx-tabs, so the extra space remains.

The workaround is to set margin-bottom: 0 for the last child as in sphinx-rtd-theme.

.sphinx-tabs .sphinx-tabs-panel *:last-child {
    margin-bottom: 0;
}

But this is not a proper solution. In fact, if you apply this CSS to the default Sphinx theme (alabaster), you will strip off too much margin at the bottom.

image

I am a CSS newbie, so if you have a more general solution, that would be great.

Reproduce the bug

Install sphinx-rtd-theme:

$ pip install sphinx-rtd-theme==1.0.0

Edit your conf.py file's html_theme setting:

html_theme = "sphinx_rtd_theme"

Then just use the sphinx-tabs.

List your environment

pip freeze
$ pip freeze
alabaster==0.7.12
Babel==2.10.3
build==0.8.0
certifi==2022.6.15
charset-normalizer==2.0.12
click==8.1.3
docutils==0.17.1
idna==3.3
imagesize==1.3.0
importlib-metadata==4.12.0
Jinja2==3.0.3
markdown-it-py==2.1.0
MarkupSafe==2.1.1
mdit-py-plugins==0.3.0
mdurl==0.1.1
myst-parser==0.18.0
packaging==21.3
pep517==0.12.0
pip-tools==6.7.0
Pygments==2.12.0
pyparsing==3.0.9
pytz==2022.1
PyYAML==6.0
requests==2.28.0
snowballstemmer==2.2.0
Sphinx==4.5.0
sphinx-rtd-theme==1.0.0
sphinx-tabs==3.4.0
sphinxcontrib-applehelp==1.0.2
sphinxcontrib-devhelp==1.0.2
sphinxcontrib-htmlhelp==2.0.0
sphinxcontrib-jsmath==1.0.1
sphinxcontrib-qthelp==1.0.3
sphinxcontrib-serializinghtml==1.1.5
tomli==2.0.1
typing_extensions==4.2.0
urllib3==1.26.9
zipp==3.8.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions