[分享]css中button是块元素吗

在CSS中，button元素是行内元素还是块级元素一直是个备受争议的话题。实际上，button元素本身是一个行内元素，但是根据渲染效果的不同，在常规情况下会表现为块级元素。以常规的标签为例：点击我啊 ...

在CSS中，button元素是行内元素还是块级元素一直是个备受争议的话题。实际上，button元素本身是一个行内元素，但是根据渲染效果的不同，在常规情况下会表现为块级元素。

以常规的标签为例：

<button>点击我啊</button> 

如果不加任何CSS样式，button元素将会是个行内元素：这个button元素将会被其他文本所包裹，并根据内容的大小自动调整宽度。但是当你想为button增加一些样式时，例如将按钮样式改为圆角，或者更改文本颜色等等，这时候表现就会变为块级元素。

例如这段CSS代码：

button {
  border-radius: 5px;
  color: #ffffff;
  background-color: #4CAF50;
  padding: 10px;
  display: block;
  width: 80%;
  margin: 0 auto;
} 

代码中的"display:block;"就让button元素表现为了块级元素。这种设定方式也让button元素可以很方便地布局在页面中。如果您不想让button元素表现为块级元素，可以设定为"display: inline;"。

因此，button元素本身是行内元素，但是根据其样式不同，可以在页面上呈现出块级元素的效果。如果您想使button元素表现为块级元素，只需要在CSS文件中为button元素添加"display:block;"样式即可。