Python Tkinter padding issue

Question

I am learning Tkinter and building a simple 8 puzzle game.
(Example: http://www.permadi.com/java/puzzle8/)

Each number is a Canvas object placed into a Frame using a grid layout. One of the objects is adding extra padding between the Canvas objects. I set the border width to the Canvas objects to -2 which solved some people's issue, but that only slightly reduced the extra padding for me. Setting this value to -4 begins to cut into my canvas area.

I am assuming that the grid layout's cells have some default padding or border width, but I have not found a way to remove it. Setting the padx, pady, ipadx, ipady values when calling grid() on the Canvas objects does not seem to help either.

Another weirdness I found was when making a border for my Canvas objects I used create_rectangle, but I had to start x_1 and y_1 at 4,4 instead of 0,0 or 2,2 which is what I would expect for a 2px border.

Here is my code. Any help/advice/workarounds/otherwise is greatly appreciated.

#!/usr/bin/python

from Tkinter import *

class Number(Canvas):
    def __init__(self, master=None, number=1):
        Canvas.__init__(self, master, width=100, height=100, bd=-2)
        self.create_text(50, 50, text=str(number), anchor=CENTER)
        self.create_rectangle(4, 4, 98, 98, width=2)


class Application(Frame):
    def create_widgets(self):
        self.playarea = Frame(self, width=300, height=300)
        self.playarea.grid_propagate(0)
        self.playarea.grid()
        self.playarea.numbers = []
        for number in xrange(1, 10):
            num_obj = Number(self.playarea, number)
            self.playarea.numbers.append(num_obj)
            row = number // 3
            col = number % 3
            num_obj.grid(row=row, column=col)

    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.grid()
        self.create_widgets()


def main():
    app = Application()
    app.master.title("Sample Application")
    app.mainloop()

if __name__ == '__main__':
    main()

Answer 1

Most likely the cause of your problem is that you're neglecting to set the highlightthickness attribute of each canvas to zero. This value controls a colored ring around the widget used to denote that it has focus.

Here's a trick when trying to solve these types of layout issues: Give each widget a different background color (ie: the root window a color, your inner frames a color, the canvas a color). You can then use the colors as a guide to see what widget owns the space you're trying to eliminate.