CSS Padding, Border and Margin – The HTML Element Box

How HTML Elements are Affected By Padding, Border and Margin Properties

Padding, Border and Margin properties affect the space around a HTML element. When learning to author web pages understanding how the space around content is defined and used is fundamental design knowledge. The content of each item on a HTML page uses a Box Model when a web browser displays it, this article is a tutorial on understanding the content, padding, border and margin parts of that model.

There are two major types of HTML elements block, where the element content starts below the previous element, and inline, where the content starts next to the previous elements content. For example the paragraph (<p>) element separates text into blocks (this paragraph and the one above are in there own <p> element). Compared to the emphasized (<em>) element which usually gives text an italic look directly in the place it is used. Each element has some content, the space around content is defined in terms of padding (the space between the content and the border), border (the line around the content and padding), and margin (the space between the border and the surrounding elements). This is illustrated in this diagram from the CSS specification.

HTML Content Padding Border Margin

Mona Lisa by Leonardo da VinciThe padding, border and margin can be broken down into top, right, bottom and left segments, illustrated in the diagram i.e. TP for top padding, RB for right border, BM for bottom margin, LB for left border, etc., this is know as the Box Model. A simple HTML page can be used to see the Box Model in action. Create a HTML page with an image (see right) with a red border and some text with a blue border, the borders added using inline CSS. (On Windows this file can be created in Notepad, or use Notepad++ which adds color coding).

Continue reading

Why Your TextView or Button Text Is Not Updating

Understand Why Changing View Text Does Not Work or is Delayed

When changing the text for a TextView using the setText method new Android developers sometimes fail to understand why it does not appear to work. The text not updating also applies to other Views as well, such as the EditView and Button, why this happens is explained. This article is also useful in helping to understand why the User Interface (UI) in your Android App might not be as responsive as expected. The underlying problem is the same. So if you are trying to find out why your setText() on EditText, TextView, Button, etc. is not working as intended, or you UI is sluggish read on, it includes a work around to help you out.

Not All Android Code Executes Immediately

When changing the TextView text this code is second nature to all Android developers:

For those new to programming the above is equivalent to these two lines but saves having to declare the TextView object:

When setText(“New Text”) is run the text is not updated immediately. Android is an event based system. Something happens on the device (the screen is touched, a key is pressed, a call comes in, etc.) and Android raises an event. An App is notified of an event and when one occurs that it needs to respond to it does so, often running the code that you have written. Your App runs its code in a loop under the control of the Android Operating Systems (OS). This code loop is referred to as the App’s thread of execution. There is only one thread and it is responsible for both running the App code and updating the display. The setText call posts a message to update the display, so the update does not happen immediately. Once remaining App code has run the UI messages are processed, then the text changes. A running App’s execution thread can be viewed as shown in this simplified diagram. Continue reading