Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Padding/Margin of dictionary elements #173

facelessuser opened this issue Feb 18, 2017 · 7 comments

Padding/Margin of dictionary elements #173

facelessuser opened this issue Feb 18, 2017 · 7 comments


Copy link

facelessuser commented Feb 18, 2017


It seems dictionary elements don't have any padding or margin at their bottom when in normal vieweing mode, but when in mobile view, we get good padding.

Normal wide viewing mode:

screenshot 2017-02-18 09 07 12

Mobile viewing (narrow mode).

screenshot 2017-02-18 09 09 15

Expected behavior

In normal viewing mode, dictionaries will have good looking margin and/or padding at bottom.

Actual behavior

During normal viewing mode dictionaries have no padding and/or margin at the bottom.

Steps to reproduce the bug

  1. Create two dictionaries after each other in documents
  2. Render documents
  3. View in normal, wide viewing and mobile, narrow viewing and compare.

Package versions

  • Python: Any
  • MkDocs: 0.16.1
  • Material: 1.0.5

Project configuration

Relevant portion:

  - markdown.extensions.toc:
      slugify: !!python/name:pymdownx.slugs.uslugify
  - markdown.extensions.admonition:
  - markdown.extensions.smarty:
      smart_quotes: false
  - pymdownx.betterem:
  - markdown.extensions.attr_list:
  - markdown.extensions.def_list:
  - markdown.extensions.tables:
  - markdown.extensions.abbr:
  - pymdownx.extrarawhtml:
  - pymdownx.superfences:
      css_class: codehilite
  - pymdownx.highlight:
        - name: php-inline
          lang: php
            startinline: true
  - pymdownx.inlinehilite:
      css_class: codehilite
  - pymdownx.magiclink:
      repo_url_shortener: true
  - pymdownx.tilde:
  - pymdownx.caret:
  - pymdownx.smartsymbols:
  - pymdownx.emoji:
      emoji_generator: !!python/name:pymdownx.emoji.to_svg
  - pymdownx.escapeall:
      hardbreak: True
      nbsp: True
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.progressbar:
  - pymdownx.arithmatex:
  - pymdownx.mark:
  - pymdownx.plainhtml:
      strip_attributes: ''
  - pymdownx.snippets:
      base_path: docs/snippets

System information

  • OS: Don't think it matters, but tested on MacOS
  • Browser: Not sure if this is relevant, but Chrome: 56.0.2924.87 (64-bit)
Copy link

squidfunk commented Feb 19, 2017

Thanks for reporting. Can you provide some sample Markdown which causes the issue?

Copy link
Contributor Author

facelessuser commented Feb 19, 2017

Yeah. The key is to have markdown.extensions.def_list enabled.

Here's a simple example. We will do two dictionaries, each with a list (there is a space after the colons).

Dictionary 1
    - list

Dictionary 2
    - list

When you inspect the HTML in your browser, the ul tag will have no margin at the bottom (assuming still rendered in full, wide mode). But if you inspect in mobile mode, you will have a margin of about 16. This seems to affect many elements like code blocks (as shown in the opening post) etc.

Copy link
Contributor Author

facelessuser commented Feb 19, 2017

Wide mode:

screenshot 2017-02-18 20 33 29


screenshot 2017-02-18 20 33 15

Copy link

squidfunk commented Feb 19, 2017

First of all, thanks for the very detailed explanation! It's a pleasure to work with such a detailed bug report. The issue was fixed in commit 3e50c33.

The margin bug came from the reset of the bottom margin of the last element within md-content__inner which was not correctly scoped, as it applied to every :last-child below md-content__inner. This reset is necessary due to margin-collapse of the parent element, so that everything aligns with the sidebars. I re-scoped it with the child selector >.

I furthermore added some styles for definition lists - left them out originally as I wanted to wait if someone even uses them. I aligned the lists with the normal lists and added a section on the specimen page:

bildschirmfoto 2017-02-19 um 16 17 14

As I just released 1.0.4 three days ago and 1.0.5 yesterday fixing some nasty bugs, I will wait for some more stuff to accumulate before releasing it because I consider this a rather minor issue, hope that's okay for you.

Copy link

squidfunk commented Feb 19, 2017

I will re-open this issue and leave it open until it is released.

@squidfunk squidfunk reopened this Feb 19, 2017
Copy link
Contributor Author

facelessuser commented Feb 19, 2017

Nice, no worries, I'll probably just pick up the changes in my extra CSS until this gets released. Thanks for getting a fix so quickly!

@squidfunk squidfunk added this to the 1.1.0 milestone Feb 26, 2017
Copy link

squidfunk commented Feb 26, 2017

Fix released in 1.1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

2 participants